将 web3 导入到 React js 中进行重大更改：webpack < 5 用于包含

Question

我在将 web3 导入到 ReactJS 时遇到问题。要复制我的问题，请初始化一个新的反应应用程序

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

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

npm install web3
npm install

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

import Web3 from "web3"; 

我在执行此操作后收到错误，npm start然后收到未解决的错误，即

找不到模块：错误：无法解析“流”

找不到模块：错误：无法解析“加密”

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

1. 如何在 webpack 5 中 Polyfill 节点核心模块
2. https://www.youtube.com/watch?v=u1PPNIBvQjk
3. 导入 web3 导致 React js 出现问题
4. https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
5. https://namespaceit.com/blog/how-fix-writing-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error
6. 如何使用 create-react-app 创建 React App 包括 Web3？我收到模块未找到错误。重大变更：使用了 webpack < 5

似乎没有人适合我。对于如何解决这个问题有什么建议吗？谢谢你！

Answer 1

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

1. 启动 React 应用程序后

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

2. 您将需要安装一些软件包：

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

3. 然后你在终端上打开你最喜欢的代码编辑器，在我的例子中它是 MS VS Code 编辑器

   code .
   
   

4. 在根目录下创建一个JS文件，如下config-overrides.js

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

    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;
    }
   
   

6. 打开package.json更改scripts后的命令：

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

这为我解决了问题！