将 web3 导入 React js 得到突破性变化：webpack < 5 used to incl

Question

我在将 web3 导入 reactjs 时遇到问题。要重现我的问题，请像这样初始化一个新的 React 应用程序

npx create-react-app my-app
cd my-app

然后在此位置打开终端。写：

npm install web3
npm install

在App,js文件中添加如下行

import Web3 from "web3";

我在执行 npm start 之后得到了错误，然后我得到了未解决的错误

Module not found: Error: Can't resolve 'stream'

Module not found: Error: Can't resolve 'crypto'

我尝试在网上寻找解决方案，特别是我尝试了每个

How to Polyfill node core modules in webpack 5
https://www.youtube.com/watch?v=u1PPNIBvQjk
Importing web3 causing a problem in react js
https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error

None 似乎和我一起工作。关于如何解决这个问题有什么建议吗？谢谢！

Answer 1

尝试使用

安装缺少的模块

npm i stream crypto

Answer 2

这是我截至 2022 年 2 月 2 日的解决方案。这可能会在未来发生变化。

像这样启动 React 应用程序后
```
npx create-react-app my-app
cd my-app
```

您将需要安装几个软件包：

 npm i web3, react-app-rewired, url, assert, buffer, crypto-browserify, stream-http, https-browserify, stream-browserify, os-browserify

然后你打开你最喜欢的代码编辑器，在我的例子中，它是 MS VS 代码编辑器，在你的终端上也是如此
```
code .
```
在根目录下创建一个JS文件为config-overrides.js

复制并粘贴此处可用的代码

 const webpack = require('webpack');
 module.exports = function override(config, env) {
     //do stuff with the webpack config...

     config.resolve.fallback = {
         url: require.resolve('url'),
         assert: require.resolve('assert'),
         crypto: require.resolve('crypto-browserify'),
         http: require.resolve('stream-http'),
         https: require.resolve('https-browserify'),
         os: require.resolve('os-browserify/browser'),
         buffer: require.resolve('buffer'),
         stream: require.resolve('stream-browserify'),
     };
     config.plugins.push(
         new webpack.ProvidePlugin({
             process: 'process/browser',
             Buffer: ['buffer', 'Buffer'],
         }),
     );

     return config;
 }

打开 package.json 将 scripts 命令更改为：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

这已经解决了我的问题！

Answer 3

我正在按照简单的步骤来解决这个问题。

将web3导入客户端app文件夹后，卸载react-scripts@5.0.0
然后重新安装react-scripts不过是4.0.3的低版本 npm 安装 react-scripts@4.0.3

到目前为止我还不需要任何其他笨拙的步骤...试一试吧..

将 web3 导入 React js 得到突破性变化：webpack < 5 used to incl

import web3 into react js getting BREAKING CHANGE: webpack < 5 used to incl

javascript

reactjs

ethereum

web3