背景
我創建了一個新的陣營使用的專案npx create-react-app client，并遇到的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檔案。但是，錯誤仍然存??在。
我該如何解決這個問題？謝謝！
uj5u.com熱心網友回復：
這看起來像是包括 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
uj5u.com熱心網友回復：
我發現的替代解決方案不是使用 Webpack 5，而是降級到[email protected]和[email protected]. 這就是我現在將使用的，直到我找到更好的解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/392980.html