如何使用 create-react-app 创建包括 Web3 的 React App？我收到未找到模块错误。重大变化：使用了 webpack < 5答案

【问题标题】：How to create React App including Web3 using create-react-app? I am getting Module not found Error. BREAKING CHANGE: webpack < 5 used如何使用 create-react-app 创建包括 Web3 的 React App？我收到未找到模块错误。重大变化：使用了 webpack < 5
【发布时间】：2022-08-20 04:35:41
【问题描述】：

我是 Web3 的新手，我正在尝试创建一个与 web3 集成的反应应用程序。以下是我在 Ubuntu 中遵循的步骤。

    create-react-app app_name
    cd app_name
    npm i --save web3
    npm start

一切正常，我得到了反应应用主页。

现在，只要我将以下代码行放入 App.js 中，应用程序就会中断，并且出现以下长错误。（见下文，第 5 行）

import Web3 from \"web3\";

我得到的错误如下。

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can\'t resolve \'stream\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/cipher-base\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"stream\": require.resolve(\"stream-browserify\") }\'
    - install \'stream-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"stream\": false }


ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can\'t resolve \'crypto\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/eth-lib/lib\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"crypto\": require.resolve(\"crypto-browserify\") }\'
    - install \'crypto-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"crypto\": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can\'t resolve \'assert\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/ethereumjs-util/dist.browser\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"assert\": require.resolve(\"assert/\") }\'
    - install \'assert\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"assert\": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can\'t resolve \'assert\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/ethereumjs-util/dist.browser\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"assert\": require.resolve(\"assert/\") }\'
    - install \'assert\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"assert\": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can\'t resolve \'assert\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/ethereumjs-util/dist.browser\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"assert\": require.resolve(\"assert/\") }\'
    - install \'assert\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"assert\": false }


ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can\'t resolve \'crypto\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/web3-eth-accounts/lib\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"crypto\": require.resolve(\"crypto-browserify\") }\'
    - install \'crypto-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"crypto\": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can\'t resolve \'crypto\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/web3-eth-accounts/node_modules/eth-lib/lib\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"crypto\": require.resolve(\"crypto-browserify\") }\'
    - install \'crypto-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"crypto\": false }


ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can\'t resolve \'http\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/web3-providers-http/lib\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"http\": require.resolve(\"stream-http\") }\'
    - install \'stream-http\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"http\": false }


ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can\'t resolve \'https\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/web3-providers-http/lib\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"https\": require.resolve(\"https-browserify\") }\'
    - install \'https-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"https\": false }


ERROR in ./node_modules/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can\'t resolve \'url\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/web3-providers-ws/lib\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"url\": require.resolve(\"url/\") }\'
    - install \'url\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"url\": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can\'t resolve \'http\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/xhr2-cookies/dist\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"http\": require.resolve(\"stream-http\") }\'
    - install \'stream-http\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"http\": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can\'t resolve \'https\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/xhr2-cookies/dist\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"https\": require.resolve(\"https-browserify\") }\'
    - install \'https-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"https\": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can\'t resolve \'os\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/xhr2-cookies/dist\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"os\": require.resolve(\"os-browserify/browser\") }\'
    - install \'os-browserify\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"os\": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can\'t resolve \'url\' in \'/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/xhr2-cookies/dist\'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback \'resolve.fallback: { \"url\": require.resolve(\"url/\") }\'
    - install \'url\'
If you don\'t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { \"url\": false }

我尝试了多个stackoverflow帖子，但似乎都没有适当的解决方案。

如果有人可以提供帮助，那就太好了。我已经为此苦苦挣扎了 5 天。

你能显示你的 package.json 文件吗？
错误消息实际上是在告诉您它有什么问题。您没有给定软件包的 polyfill。

标签： reactjs webpack create-react-app web3js

【解决方案1】：

Web3 github页面在这里提供了解决方案：https://github.com/ChainSafe/web3.js#web3-and-create-react-app

此解决方案利用 react-app-rewired 包：https://www.npmjs.com/package/react-app-rewired

Polyfills 可以通过 node-polyfill-webpack-plugin 安装：https://www.npmjs.com/package/node-polyfill-webpack-plugin

此解决方案的好处：

无需弹出和修改配置文件 --> react-scripts build 仍然可以工作
无需将 react-scripts 降级到较低版本

【讨论】：

【解决方案2】：

在运行npm uninstall web3 并删除package-lock.json 和node_modules 后运行npm install @web3-react/core web3 @web3-react/injected-connector

你不要需要为此降级 react 或安装任何 polyfill 插件

【讨论】：

不工作....
将反应脚本降级到 4.0.3

【解决方案3】：

这是因为 Webpack 5 不再对节点核心模块进行自动填充。

只需为了在 Create React App 中修改 webpack.config.js，您必须运行

npm 运行弹出

这将创建一个config 目录，其中您将拥有webpack.config.js。

 npm i node-polyfill-webpack-plugin

然后在 webpack.config.js 中：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

将此添加到 plugins 数组

plugins: [
    new NodePolyfillPlugin()
  ],

我在这里解释了如何使用 create-react-app 进行设置：

Web3 Issue : React Application not compiling

我还解释了用 webpack 解决：

Webpack breaking change

【讨论】：

嗨 Yilmaz，谢谢你的链接，但唯一对我有用的是降级反应版本。
@GKV 你的意思是创建反应应用程序。降级的 CRA 使用 webpack4，而 webpack 包含 polyfolls。但是当包变得更大时，它们会删除一些功能。所以 webpack5 移除了所有的 node 核心模块
嗨@Yilmaz，我在 package.json 中添加了以下内容（“react-scripts”：“^4.0.3”），删除了 node_modules 并使用 npm i 命令再次安装了所有内容。