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或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"),
    },
  },

Answer 2

目前 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。

請參閱以下鏈接中的解決方案

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

Answer 4

這是因為您使用的是新版本的 Webpack，我已經解決了添加 polyfill 的問題，您可以在此處查看完整的實現：

https://github.com/EhsanParsania/React-Webpack5-Polyfill