Web3问题:未编译

Question

在编译过程中，我面临着反应应用的问题。请找到下面的问题和截图。

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

随着webpack的成长，他们移除了webpack5中的填充物。看起来你在使用CRA (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"),
    },
  },

我有webpac5 Boilerplate。如果你愿意的话，你可以使用它：

• 由于有太多的填充，而不是手动安装所有，您可以使用节点-填充-webpack-插件包。而不是fallback属性 const NodePolyfillPlugin =require(“node-poly填充-webpack-plugin”)；插件：[新HtmlWebpackPlugin({ title："esBUild"，模板："src/index.html"，})，//而不是回退新的NodePolyfillPlugin()，新webpack.ProvidePlugin({ process："process/browser"，缓冲器：“缓冲器”，“缓冲器”，反应："react"，})，]，

webpack5样板github回购

Answer 2

to更新了他们的自述文件，包括故障排除步骤。参考链接。

Web3和

如果您使用的是创建-反应-应用程序版本的>=5，您可能会遇到问题的构建。这是因为NodeJS的填充不包括在最新版本的创建-反应-应用程序。

解决方案

• 安装react app-重新连接和缺少的模块

如果你用的是纱线：

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

如果您正在使用国家预防机制：

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填充应该包括现在，您的应用程序应该与web3功能。

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

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

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

如果您使用的是创建-反应-应用程序版本的>=5，您可能会遇到问题的构建。这是因为NodeJS的填充不包括在最新版本的创建-反应-应用程序。

目前，CRA发布了react-scripts和5.0.0版本。与其退出CRA，不如将react-scripts降级为4.0.3版本。我也面临着同样的问题，被降级为我工作。

先删除旧版本

npm uninstall react-scripts

然后运行以下命令：

npm i react-scripts@4.0.3

Answer 3

Web3和create，如果您使用的是创建-反应-应用程序版本>=5，您可能会遇到构建问题。这是因为NodeJS的填充不包括在最新版本的创建-反应-应用程序。

参考下面链接中的解决方案

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues