如何使用 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
我是 Web3 的新手，我正在尝试创建一个与 web3 集成的 React 应用程序。以下是我在 Ubuntu.
中遵循的步骤
create-react-app app_name
cd app_name
npm i --save web3
npm start
一切正常，我得到了 React 应用程序主页。
现在，一旦我将以下代码行放入 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 }
我尝试了多个 Whosebug post 但其中 none 似乎有合适的解决方案。
- Error Library web3 and Webpack in react and angular [closed]
- I am getting this error whilr importing Web3 from web3 in react js 17.0.1.how to fix this
如果有人能提供帮助那就太好了。我已经为此苦苦挣扎了 5 天。
那是因为 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 进行设置：
我也说明了用webpack解决：
Webpack breaking change
运行 npm install @web3-react/core web3 @web3-react/injected-connector 在 运行 npm uninstall web3 之后删除 package-lock.json 和 node_modules
您不要需要为此降级 React 或安装任何 polyfill 插件
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 构建仍然有效
- 无需降级 react-scripts 到较低版本
我是 Web3 的新手，我正在尝试创建一个与 web3 集成的 React 应用程序。以下是我在 Ubuntu.
中遵循的步骤 create-react-app app_name
cd app_name
npm i --save web3
npm start
一切正常，我得到了 React 应用程序主页。
现在，一旦我将以下代码行放入 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 }
我尝试了多个 Whosebug post 但其中 none 似乎有合适的解决方案。
- Error Library web3 and Webpack in react and angular [closed]
- I am getting this error whilr importing Web3 from web3 in react js 17.0.1.how to fix this
如果有人能提供帮助那就太好了。我已经为此苦苦挣扎了 5 天。
那是因为 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 进行设置：
我也说明了用webpack解决：
Webpack breaking change
运行 npm install @web3-react/core web3 @web3-react/injected-connector 在 运行 npm uninstall web3 之后删除 package-lock.json 和 node_modules
您不要需要为此降级 React 或安装任何 polyfill 插件
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 构建仍然有效
- 无需降级 react-scripts 到较低版本