create-react-app安装web3js的坑

坑1、版本5.x 提示各种报错

坑2、在坑1结束后 react项目启动报错Plugin “react“ was conflicted

坑3、 坑1-2解决了 又出现无法加载的问题 我又找了很久答案

终极解决方案

来源 https://stackoverflow.com/questions/69431515/how-to-use-webpack-and-web3-in-react

该问题webpack不再为您解决此处列出的节点核心模块。基本上有 2 个选项可以解决与您使用的特定软件包相关的问题web3：

选项#1：这个只是使用已经为web位于dist/web3.min.js. 因此，然后将您的导入切换为：
import Web3 from “web3/dist/web3.min”;

如果上述解决方案无法解决 再进行下面的坑的解决方法。

react-app-rewired 添加回退，如 Github https://github.com/facebook/create-react-app/issues/11756中所述 安装 react-app-rewired，config-overrides.js在项目的根目录中创建文件. 我在文件中的代码

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        "fs": false,
        "tls": false,
        "net": false,
        "http": require.resolve("stream-http"),
        "https": false,
        "zlib": require.resolve("browserify-zlib") ,
        "path": require.resolve("path-browserify"),
        "stream": require.resolve("stream-browserify"),
        "util": require.resolve("util/"),
        "crypto": require.resolve("crypto-browserify"),
        //lee add
        "assert": false,
        "url": false,
        "os": false
    }
    
    return config
}

在 package.json 中将脚本从 更改 'start': 'react-scripts start' 为 'start': 'react-app-rewired start'。然后启动项目 npm run start 或 yarn start

命令

sudo npm install react-app-rewired --save-dev
cd /home/www/my-app
vi config-overrides.js 替换 'start': 'react-scripts start' 为 'start': 'react-app-rewired start'

"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/jest"
    ]
},