导入 web3 导致 React js 出现问题

Question

Compiled with problems:

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

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

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - 安装 '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”中的“加密”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装 '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”中的“assert”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "assert": require.resolve("assert/") }' - 安装 '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”中的“assert”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "assert": require.resolve("assert/") }' - 安装 '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”中的“assert”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "assert": require.resolve("assert/") }' - 安装 '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”中的“加密”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装 '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”中的“加密”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装 '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 < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个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 < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个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 < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个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 < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个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 < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - 安装 'os-browserify' 如果你不这样做不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "os": false }

错误

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

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

Answer 1

嗨，我也刚刚解决这个问题。

事实证明，这更多的是涉及从 webpack4 到 5 的过渡的情况。需要手动添加webpack 节点 polyfill

在我的情况下 npm install react-app-rewired --save 暴露了 webpack 配置 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
}