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

我在编译时遇到Reaction应用程序的问题。 请在下面找到问题和屏幕截图。

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版本，这些版本的稳定版本是什么？

请提出建议。

---

解决方案

随着webpack体型的增大，他们移除了网络包装5中的多层填充物。看起来您正在使用Create-Reaction-App(CRA)，而webpack的配置在CRA中没有向用户公开。您可以使用eject公开它。您可能在Package.json：

中有此脚本

   "eject": "react-scripts eject"

因此运行npm run eject。不建议这样做，因为这意味着您将不再受益于CRA的更新。

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

拿到webpack配置后，您需要在webpack配置中添加resolve属性，并安装所有需要的包：

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。如果需要，您可以使用它：

• 由于多边形填充太多，您可以使用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