导入 web3 导致反应 js 出现问题 [关闭]

Question

Compiled with problems:

./node_modules/cipher-base/index.js 3:16-43 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\cipher-base”中的“流”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - 安装“流浏览器” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "stream": false }

./node_modules/eth-lib/lib/bytes.js 9:193-227 中的错误

未找到模块：错误：无法解析 'C:\Blockchain\lottery-React\node_modules\eth-lib\lib' 中的 'crypto'

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装“加密浏览器” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "crypto": false }

./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser”中的“断言”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "assert": require.resolve("assert/") }' - 安装“断言” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "assert": false }

./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser”中的“断言”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "assert": require.resolve("assert/") }' - 安装“断言” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "assert": false }

./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser”中的“断言”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "assert": require.resolve("assert/") }' - 安装“断言” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "assert": false }

./node_modules/web3-eth-accounts/lib/index.js 31:74-91 中的错误

未找到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\lib”中的“crypto”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装“加密浏览器” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "crypto": false }

./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\node_modules\eth-lib\lib”中的“crypto”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装“加密浏览器” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "crypto": false }

./node_modules/web3-providers-http/lib/index.js 30:11-26 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\web3-providers-http\lib”中的“http”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "http": require.resolve("stream-http") }' - 安装'stream-http' 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "http": false }

./node_modules/web3-providers-http/lib/index.js 32:12-28 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\web3-providers-http\lib”中的“https”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "https": require.resolve("https-browserify") }' - 安装“https-browserify” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "https": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist”中的“http”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "http": require.resolve("stream-http") }' - 安装'stream-http' 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "http": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist”中的“https”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "https": require.resolve("https-browserify") }' - 安装“https-browserify” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "https": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22 中的错误

找不到模块：错误：无法解析“C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist”中的“os”

重大变化：webpack

如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - 安装“操作系统浏览器” 如果您不想包含 polyfill，则可以使用这样的空模块： resolve.fallback: { "os": false }

错误

src\App.js 第 4:1 行：在模块主体中导入；重新排序到顶部导入/第一

搜索关键字以了解有关每个错误的更多信息。

Answer 1

您好，我也刚刚解决了这个问题。

原来这更像是一种从 webpack4 过渡到 5 的情况。需要手动添加 webpack node polyfill

在我的情况下 npm install react-app-rewired --saveexposes webpack config npm install npm install node-polyfill-webpack-plugin --save

在config-overrides.js 中

module.exports = function override(config, env) {
  config.plugins.push(new NodePolyfillPlugin({
    excludeAliases: ["console"]
  }))
  return config
}