我试图在Webpack 5中填充模块,但不工作(Reactjs)

ryhaxcpt  于 2022-11-13  发布在  Webpack
关注(0)|答案(6)|浏览(217)

嗨,伙计们,我是一个新手在React,当我开始我的项目,我得到了Wepback的V5错误信息

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

"我用的是什么"

  1. Os: Win11
  2. Node : v16
  3. React:v17
  4. React-script : v5
  5. Webpack:v5

此错误消息包含

  1. Crypto
  2. Http
  3. Https
  4. Stream

错误输出

编译时出现问题:X

  1. ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
  2. Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\eth-lib\lib'
  3. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  4. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  5. If you want to include a polyfill, you need to:
  6. - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
  7. - install 'crypto-browserify'
  8. If you don't want to include a polyfill, you can use an empty module like this:
  9. resolve.fallback: { "crypto": false }
  10. ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91
  11. Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\lib'
  12. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  13. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  14. If you want to include a polyfill, you need to:
  15. - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
  16. - install 'crypto-browserify'
  17. If you don't want to include a polyfill, you can use an empty module like this:
  18. resolve.fallback: { "crypto": false }
  19. ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227
  20. 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'
  21. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  22. This is no longer the case. Verify if you need this module and configure a polyfill for it.
  23. If you want to include a polyfill, you need to:
  24. - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
  25. - install 'crypto-browserify'
  26. If you don't want to include a polyfill, you can use an empty module like this:
  27. resolve.fallback: { "crypto": false }

图像包含输出

Webpack5 Error Message

x0fgdtte

x0fgdtte1#

我解决了这些错误,但我的应用程序没有呈现。如果你有兴趣清除这些错误,你可以直接粘贴代码到your-project/node_modules/react-scripts/config/webpack.config.js,但这些更改可能会在重建应用程序后被覆盖。在module中找到。exports对象解析并写入回退,在您的情况下是“crypto”:require.resolve("crypto-browserify") .
并安装依赖项npm install crypto-browserify

  1. resolve: {
  2. // fallback: {
  3. // "fs": false,
  4. // "tls": false,
  5. // "net": false,
  6. // "http": require.resolve("stream-http"),
  7. // "https": false,
  8. // "zlib": require.resolve("browserify-zlib") ,
  9. // "path": require.resolve("path-browserify"),
  10. // "stream": require.resolve("stream-browserify"),
  11. // "util": require.resolve("util/"),
  12. "crypto": require.resolve("crypto-browserify")
  13. }

或者你也可以使用react-app-rewired添加回退,如Github https://github.com/facebook/create-react-app/issues/11756中所述安装react-app-rewired,在项目的根目录下创建config-overrides.js文件。

  1. module.exports = function override (config, env) {
  2. console.log('override')
  3. let loaders = config.resolve
  4. loaders.fallback = {
  5. "fs": false,
  6. "tls": false,
  7. "net": false,
  8. "http": require.resolve("stream-http"),
  9. "https": false,
  10. "zlib": require.resolve("browserify-zlib") ,
  11. "path": require.resolve("path-browserify"),
  12. "stream": require.resolve("stream-browserify"),
  13. "util": require.resolve("util/"),
  14. "crypto": require.resolve("crypto-browserify")
  15. }
  16. return config
  17. }

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

展开查看全部
nnvyjq4y

nnvyjq4y2#

我是这样解决我的问题的:

  1. npm uninstall react-scripts
  2. npm install react-scripts@4.0.3
fdbelqdn

fdbelqdn3#

要在reactjs中使用webpack 5中的polyfill,请执行以下步骤:
1.首先安装npm install node-polyfill-webpack-plugin模块。(参考链接:(第10页)
1.然后转到webpack.config.js --〉节点模块-〉React脚本-〉配置-〉webpack.config.js
1.然后添加下面的代码:

  1. const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
  2. module.exports = {
  3. // Other rules...
  4. plugins: [
  5. new NodePolyfillPlugin()
  6. ]
  7. }

huwehgph

huwehgph4#

这看起来像是许多软件包(包括web 3)的新问题,因为这些软件包在不为polyfils添加回退的情况下与Webpack v5不兼容。
此处注明的问题:https://github.com/facebook/create-react-app/issues/11756
我通过在webpack.config.js文件中添加回退来解决这个问题;

  1. module.exports = {
  2. resolve: {
  3. fallback: {
  4. assert: require.resolve('assert'),
  5. crypto: require.resolve('crypto-browserify'),
  6. http: require.resolve('stream-http'),
  7. https: require.resolve('https-browserify'),
  8. os: require.resolve('os-browserify/browser'),
  9. stream: require.resolve('stream-browserify'),
  10. },
  11. },
  12. };

但在构建过程中出现编译错误:

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

这是通过添加到我的.env文件解决的;

  1. GENERATE_SOURCEMAP=false

希望这对你有帮助。

展开查看全部
ggazkfy8

ggazkfy85#

由于我没有足够的声望来 * 编辑 * 或 * 评论 * 这个answer,我不得不创建一个新的答案,为我工作。基本上一个也需要安装readline
即:

  1. npm uninstall react-scripts
  2. npm install react-scripts@4.0.3
  3. npm install readline
ndasle7k

ndasle7k6#

在我的情况下,一个未使用的组件导入导致了错误。简单地删除不需要的组件导入。
从“React”导入{ReactDOM}

相关问题