我尝试在 webpack 5 中填充模块但不工作（Reactjs）

Posted 2023-02-22

【中文标题】我尝试在 webpack 5 中填充模块但不工作（Reactjs）

【英文标题】：i tried to Polyfill modules in webpack 5 but not working (Reactjs)

【发布时间】：2022-01-20 16:54:26

【问题描述】：

大家好，我是 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 

图像包含输出

Webpack5 Error Message

【问题讨论】：

没人回答

我有同样的问题，并尝试使用许多建议的解决方案进行修复，但对我不起作用

【参考方案1】：

对于包括 web3 在内的许多包来说，这看起来像是一个新问题，因为这些包在不为 polyfil 添加后备的情况下与 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

希望这会有所帮助。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

我解决了这些错误，但我的应用没有呈现。 如果您有兴趣清除这些错误，您可以将代码直接粘贴到your-project/node_modules/react-scripts/config/webpack.config.js，但这些更改可以在重建您的应用程序后被覆盖。 在 module.exports 对象中找到解析并写入回退，在您的情况下它是“加密”：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 文件。 我在文件中的代码

module.exports = function override (config, env) 
    console.log('override')
    let loaders = config.resolve
    loaders.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")
    
    
    return config

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

【讨论】：

谢谢兄弟，你值得一票

【参考方案3】：

看看。如果它可以帮助任何人

https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。