[英]Web3 Issue : React Application not compiling
我在编译时遇到了 React 应用程序的问题。 请在下面找到问题和屏幕截图。
ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in '/Users/rohit/Downloads/Personal/web3/react-minting-website/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 }
@ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
@ ./node_modules/web3-core/lib/index.js 23:23-58
@ ./node_modules/web3/lib/index.js 32:11-31
@ ./src/index.js 10:0-24 14:13-17
经过审查,我发现问题与 web3 相关的依赖项有关:
https://www.npmjs.com/package/web3
https://www.npmjs.com/package/@web3-react/core
https://www.npmjs.com/package/@web3-react/injected-connector
有人可以帮助我吗? 我正在使用 LTS 版本,这些是什么稳定版本?
请提出一些建议。
随着 webpack 的大小增加,他们删除了 webpack5 中的 polyfill。 看起来您正在使用 create-react-app (CRA) 并且 webpack 配置未在 CRA 中向用户公开。 您可以使用eject
它来暴露它。 你可能在 package.json 中有这个脚本:
"eject": "react-scripts eject"
所以运行npm run eject
。 不建议这样做,因为这意味着您将不再受益于 CRA 的更新。
获得 webpack 配置后,您需要将resolve
属性添加到 webpack 配置并安装所有这些必需的软件包:
resolve: {
extensions: [".js", ".css"],
alias: {
// add as many aliases as you like!
// optional
components: path.resolve(__dirname, "src/components"),
},
fallback: {
// path: require.resolve("path-browserify"),
fs: false,
assert: require.resolve("assert/"),
os: require.resolve("os-browserify/browser"),
constants: require.resolve("constants-browserify"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
},
},
目前 CRA 发布react-scripts
版本为5.0.0
。 而不是弹出 CRA,只需将react-scripts
降级到版本4.0.3
。 我面临同样的问题,降级对我有用。
首先删除旧版本
npm uninstall react-scripts
然后运行以下命令:
npm i react-scripts@4.0.3
Web3 和 Create-react-app如果您使用的 create-react-app 版本 >=5,您可能会遇到构建问题。 这是因为最新版本的 create-react-app 中不包含 NodeJS 的 polyfill。
请参阅以下链接中的解决方案
https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues
这是因为您使用的是新版本的 Webpack,我已经解决了添加 polyfill 的问题,您可以在此处查看完整的实现:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.