Webpack 5错误-无法解决ReactJS项目中的“密码”、“http”和“https”
Webpack 5错误-无法解决ReactJS项目中的“密码”、“http”和“https”
提问于 2021-12-21 01:10:32
我使用npx create-react-app client创建了一个新的React项目，并且在Webpack 5中遇到了一些问题。最初，我在assert、os和stream中出现了错误，但通过安装它们并将它们包含在webpack.config.js中来修复它们。该文件位于client/src文件夹中。
这些错误是这样的：
Compiled with problems:
ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\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-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\Username\Projects\testProject\client\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 }
=================================================================
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28
Module not found: Error: Can't resolve 'https' in 'C:\Users\Username\Projects\testProject\client\node_modules\xhr2-cookies\dist'
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: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }码
这就是我的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'),
},
},
};下面是我的package.json文件。
{
"dependencies": {
"assert": "^2.0.0",
"crypto-browserify": "^3.12.0",
"dotenv": "^10.0.0",
"https-browserify": "^1.0.0",
"os": "^0.1.2",
"stream": "^0.0.2",
"stream-http": "^3.2.0"
}
}从上面可以看出，我已经从错误(crypto-browserify、stream-http和https-browserify)中安装了建议的包，并将它们包含在webpack.config.js文件中。然而，这些错误仍然存在。
我该怎么解决这个问题？
回答 4
Stack Overflow用户
发布于 2021-12-23 04:16:54
我发现的另一个解决方案不是使用Webpack 5，而是将其降级为webpack@4.46.0和react-scripts@4.0.3。在我找到更好的解决方案之前，这就是我现在要使用的内容。
Stack Overflow用户
发布于 2021-12-26 17:47:59
以某种方式修正了它，使用react-app重新连线，确保安装了这个包，并在根目录中创建了新的文件config-overrides.js。
/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
//do stuff with the webpack config...
config.resolve.fallback = {
url: require.resolve('url'),
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'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}现在，编辑您的package.json使反应-应用程序重新连接到工作。
//package.json
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto": "npm:crypto-browserify",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"react": "^17.0.2",
"react-app-rewired": "^2.1.9",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"rewire": "^6.0.0",
"stream": "npm:stream-browserify",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"url": "^0.11.0",
"web-vitals": "^2.1.2",
"web3": "^1.6.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},Stack Overflow用户
发布于 2021-12-21 09:22:31
对于包括web3在内的许多软件包来说，这似乎是一个新问题，因为这些包与Webpack v5不兼容，而不为polyfils添加后盾。
注意事项：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'),
},
},
};使用；
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2",
"web3": "^1.6.1"
},但是在构建过程中也需要但得到编译错误：
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error这是通过添加到我的.env文件来解决的；
GENERATE_SOURCEMAP=false页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70429654
复制相关文章
相似问题
腾讯云开发者
