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

随着 webpack 规模的增长，他们删除了 webpack5 中的 polyfill。看起来您正在使用 create-react-app (CRA) 并且 webpack 配置未向 CRA 中的用户公开。您可以使用 eject 公开它。你可能在 package.json:

中有这个脚本

   "eject": "react-scripts eject"

所以运行npm run eject。不推荐这样做，因为这意味着您将不再受益于 CRA 的更新。

您可以使用 rewire or craco 处理弹出。

获得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。如果你愿意，你可以使用它：

由于polyfill太多，不用手动全部安装，可以使用node-polyfill-webpack-plugin包。而不是 fallback 属性

 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

plugins: [
  new HtmlWebpackPlugin({
    title: "esBUild",
    template: "src/index.html",
  }),
  // instead of fallback
  new NodePolyfillPlugin(),

  new webpack.ProvidePlugin({
    process: "process/browser",
    Buffer: ["buffer", "Buffer"],
    React: "react",
  }),
],

webpack5 boilerplate github repo

Answer 2

Update 25/01/2022

现在 web3.js 已经更新了他们的自述文件以包含故障排除步骤。访问 link 了解更多。

目前 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-react-app 如果您使用的是 create-react-app 版本 >=5，您可能运行会遇到构建问题。这是因为 create-react-app.

的最新版本中未包含 NodeJS polyfill

参考下面的解决方法link

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

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

Web3 Issue : React Application not compiling

javascript

reactjs

create-react-app

web3js

web3