如何修复“突破性变化：webpack〈5默认情况下用于包含node.js核心模块的polyfill”错误？

3pmvbmvn 于 2022-11-13 发布在 Webpack

关注(0)|答案(4)|浏览(390)

我想在vue & laravel 8上使用**“web 3”和“walletconnect/web 3-provider”**包。我通过npm i --保存web3@walletconnect/web 3-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();

但我得到这个错误：
2：16-43模块没有找到：模块没有找到错误：无法解析“/var/www/tok/node_modules/cipher-base”中的“stream”
突破性变化：webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充，则需要：

添加回退'resolve。回退：{“流”：必需。resolve（“流浏览器化”）}'
install 'stream-browserify'如果你不想包含polyfill，你可以使用一个空的模块，如下所示：resolve.fallback:{“流”：错误}

1：22-39模块没有找到：/node_module/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list/node_list错误：无法解析“/var/www/tok/node_modules/keccak/lib/api”中的“stream”
突破性变化：webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充，则需要：

添加回退'resolve。回退：{“流”：必需。resolve（“流浏览器化”）}'
install 'stream-browserify'如果你不想包含polyfill，你可以使用一个空的模块，如下所示：resolve.fallback:{“流”：错误}

1：22-39模块没有找到：模块没有找到错误：无法解析“/var/www/tok/node_modules/keccak/lib/api”中的“stream”
突破性变化：webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充，则需要：

添加回退'resolve。回退：{“流”：必需。resolve（“流浏览器化”）}'
install 'stream-browserify'如果你不想包含polyfill，你可以使用一个空的模块，如下所示：resolve.fallback:{“流”：错误}

webpack编译时出现3个错误
显然这个错误与Webpack配置有关。我该如何解决它？有人可以帮助我吗？

webpack

来源：https://stackoverflow.com/questions/67348426/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-node-js-core

4条答案

按热度按时间

w6mmgewl1#

运行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"
  },

赞(0）回复(0）举报 2022-11-13

muk1a3rh2#

由于在webpack5中删除了默认多边形填充，因此必须安装以下实用程序：

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配置。

赞(0）回复(0）举报 2022-11-13

hmae6n7t3#

您可以通过如下指定空的回退来修复它：

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 }
        },

赞(0）回复(0）举报 2022-11-13

2ul0zpep4#

如果您的错误以“找不到模块：错误：无法解析'http' ...'安装url-loader就可以了。只要使用npm安装即可。npm install --save-dev url-loader

赞(0）回复(0）举报 2022-11-13