Web3 问题：React 应用程序未编译

Question

我在编译时遇到 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 版本，这些版本有哪些稳定版本？

Answer 1

web3.js 已更新其自述文件以包含故障排除步骤。参考号 关联。

Web3 和 Create-react-app

如果您使用的 create-react-app 版本 >=5，您可能会遇到构建问题。这是因为最新版本的 create-react-app 中不包含 NodeJS polyfill。

解决方案

• 安装react-app-rewired和缺少的模块

如果您使用的是纱线：

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

如果您使用 npm：

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

• 在项目文件夹的根目录中创建config-overrides.js以下内容：

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

• 在package.json更改启动、构建和测试的脚本字段中。而不是将react-scripts其替换为react-app-rewired

前：

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

后：

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

现在应该包含缺少的 Nodejs polyfill，并且您的应用程序应该可以与 web3 一起使用。

• 如果您想隐藏控制台创建的警告：

在函数config-overrides.js内override添加：

config.ignoreWarnings = [/Failed to parse source map/];

如果您使用的 create-react-app 版本 >=5，您可能会遇到构建问题。这是因为最新版本的 create-react-app 中不包含 NodeJS polyfill。

目前 CRA 附带react-scripts版本5.0.0. 无需弹出 CRA，只需降级react-scripts到版本即可4.0.3。我面临着同样的问题，降级对我有用。

首先删除旧版本

npm uninstall react-scripts

然后运行以下命令：

npm i react-scripts@4.0.3