我尝试在 webpack 5 中 Polyfill 模块但不起作用（Reactjs）

Question

大家好，我是 React 的新手，当我开始我的项目时，我收到 Wepback V5 错误消息

解决更新：https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

这是用什么啊！

Os: Win11
Node : v16
React:v17
React-script : v5
Webpack:v5

此错误消息包含

Crypto
Http
Https
Stream

错误输出

编译有问题：X

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

图像包含输出

Answer 1

我解决了这些错误，但我的应用程序没有呈现。如果您有兴趣清除这些错误，可以直接将代码粘贴到其中your-project/node_modules/react-scripts/config/webpack.config.js，但在重建应用程序后可以覆盖这些更改。在 module.exports 中找到对象解析并写入后备，在您的情况下它是“crypto” require.resolve("crypto-browserify")：。

并安装依赖项npm install crypto-browserify。

resolve: {
//   fallback: {
//     "fs": false,
//     "tls": false,
//     "net": false,
//     "http": require.resolve("stream-http"),
//     "https": false,
//     "zlib": require.resolve("browserify-zlib") ,
//     "path": require.resolve("path-browserify"),
//     "stream": require.resolve("stream-browserify"),
//     "util": require.resolve("util/"),
       "crypto": require.resolve("crypto-browserify")
} 

或者您可以使用react-app-rewired添加后备，如Github https://github.com/facebook/create-react-app/issues/11756中所述 安装react-app-rewired，config-overrides.js在项目的根目录中创建文件。我的代码在文件中

resolve: {
//   fallback: {
//     "fs": false,
//     "tls": false,
//     "net": false,
//     "http": require.resolve("stream-http"),
//     "https": false,
//     "zlib": require.resolve("browserify-zlib") ,
//     "path": require.resolve("path-browserify"),
//     "stream": require.resolve("stream-browserify"),
//     "util": require.resolve("util/"),
       "crypto": require.resolve("crypto-browserify")
} 

在 package.json 中将脚本从 更改 'start': 'react-scripts start' 为 'start': 'react-app-rewired start'。然后启动项目npm run start或者yarn start

Answer 2

我这样解决了我的问题：

npm uninstall react-scripts
npm install react-scripts@4.0.3

Answer 3

要在reactjs中的webpack 5中使用polyfill，请按照以下步骤操作：

1. 首先安装npm install node-polyfill-webpack-plugin模块。（参考链接：https ://www.npmjs.com/package/node-polyfill-webpack-plugin ）

2. 然后去跟随 webpack.config.js --> node-module -> react-scripts -> config -> webpack.config.js

3. 然后添加以下代码：

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

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

Answer 4

这看起来像是许多包（包括 web3）的新问题，因为如果不添加 Polyfils 的后备，这些包与 Webpack v5 不兼容。

这里指出的问题：https ://github.com/facebook/create-react-app/issues/11756

我通过将后备添加到 webpack.config.js 文件中解决了这个问题；

module.exports = {
    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

但还需要但在构建过程中出现编译错误：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

通过添加到我的 .env 文件解决了这个问题；

GENERATE_SOURCEMAP=false

希望这可以帮助。

Answer 5

我的解决方案是使用Cracomodule 覆盖 Webpack ModuleScopePlugin 并将其解析为使用浏览器兼容的模块。

您还可以使用react-app-rewire模块。

require.resolve如果需要，可以将其他 Node.js 模块添加到该字段。

1. 安装模块

yarn add @craco/craco crypto-browserify path-browserify stream-browserify -D

2. 添加craco.config.js

module.exports = {
  webpack: {
    configure: webpackConfig => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      webpackConfig['resolve'] = {
        fallback: {
          path: require.resolve("path-browserify"),
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        },
      }
      return webpackConfig;
    },
  },
};

3. 替换脚本字段package.json

yarn add @craco/craco crypto-browserify path-browserify stream-browserify -D