![](/img/trans.png)
[英]when i add a package i recieve webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case
[英]How fix "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
我想在 vue 和 laravel 上使用“web3”和“walletconnect/web3-provider” package 8. 我通過 npm i --save web3 @walletconnect/web3-provider 命令安裝它,然后添加以下代碼以導入到 vue。
import Vue from "vue";
import Web3 from "web3";
import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal"
import WalletConnectProvider from "@walletconnect/web3-provider";
const connector = new WalletConnect({
bridge: "https://bridge.walletconnect.org", // Required
qrcodeModal: QRCodeModal,
});
window.walletConnector = connector;
// Create WalletConnect Provider
const provider = new WalletConnectProvider({
infuraId: "27e484dcd9e3efcfd25a83a78777cdf1",
});
// Enable session (triggers QR Code modal)
await provider.enable();
但我得到這個錯誤:
錯誤 in./node_modules/cipher-base/index.js 2:16-43 找不到模塊:錯誤:無法解析 '/var/www/tok/node_modules/cipher-base' 中的 'stream'
重大變化:webpack < 5 用於默認包含 node.js 核心模塊的 polyfill。 這已不再是這種情況。 驗證您是否需要此模塊並為其配置一個 polyfill。
如果你想包含一個 polyfill,你需要:
- 添加后備 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify' 如果你不想包含 polyfill,你可以像這樣使用一個空模塊:resolve.fallback: { "stream": false }
/node_modules/keccak/lib/api/keccak.js 1:22-39 找不到模塊:錯誤:無法解析 '/var/www/tok/node_modules/keccak/lib/api' 中的 'stream'
重大變化:webpack < 5 用於默認包含 node.js 核心模塊的 polyfill。 這已不再是這種情況。 驗證您是否需要此模塊並為其配置一個 polyfill。
如果你想包含一個 polyfill,你需要:
- 添加后備 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify' 如果你不想包含 polyfill,你可以像這樣使用一個空模塊:resolve.fallback: { "stream": false }
錯誤 in./node_modules/keccak/lib/api/shake.js 1:22-39 找不到模塊:錯誤:無法解析 '/var/www/tok/node_modules/keccak/lib/api' 中的 'stream'
重大變化:webpack < 5 用於默認包含 node.js 核心模塊的 polyfill。 這已不再是這種情況。 驗證您是否需要此模塊並為其配置一個 polyfill。
如果你想包含一個 polyfill,你需要:
- 添加后備 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify' 如果你不想包含 polyfill,你可以像這樣使用一個空模塊:resolve.fallback: { "stream": false }
webpack 編譯有 3 個錯誤
顯然這個錯誤與 Webpack 配置有關。 我該如何解決? 有人可以幫助我嗎?
運行npm i react-app-rewired
創建 config-overrides.js 文件並添加:
const webpack = require('webpack');
module.exports = function override(config, env) {
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;
}
從 config-overrides.js 安裝所有包。
在 package.json 中,替換腳本:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
您可以通過像這樣指定空的后備來修復它:
fallback: { "http": false, "https": false, "stream": false, "tty": false, "zlib": false }
這在 webpack 配置中的resolve
部分:
{
mode: isDevBuild ? 'development' : 'production',
target: ['web', 'es5'],
resolve: {
extensions: ['.js'],
/* polyfills used to be included, now they must be manually added. however, they will error out if not added */
/* thus the :false fallbacks */
fallback: { "http": false, "https": false, "stream": false, "tty": false, "zlib": false }
},
由於移除了 webpack5 中的默認 polyfill,您必須安裝以下實用程序:
yarn add buffer
yarn add util
yarn add stream-browserify
yarn add assert
yarn add stream-http
yarn add url
yarn add https-browserify
yarn add os-browserify
然后,將以下代碼片段添加到您的 webpack.config.js 中:
resolve: {
fallback: {
fs: false,
'stream': require.resolve('stream-browserify'),
'buffer': require.resolve('buffer/'),
'util': require.resolve('util/'),
'assert': require.resolve('assert/'),
'http': require.resolve('stream-http/'),
'url': require.resolve('url/'),
'https': require.resolve('https-browserify/'),
'os': require.resolve('os-browserify/'),
},
}
如果您在本地使用基於create-react-app
構建的應用程序,則必須運行npm run eject
才能自定義 webpack 配置。
如果您的錯誤以“找不到模塊:錯誤:無法解析'http'...”開頭,安裝url-loader
就可以解決問題。 只需使用 npm 安裝即可。 npm install --save-dev url-loader
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.