如何修复“重大更改:webpack < 5 used to include polyfills for node.js core modules by default" error?

问题描述 投票:0回答:4

我想在 vue 和 laravel 8 上使用 "web3""walletconnect/web3-provider" 包。我通过 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();

但我收到此错误:

./node_modules/cipher-base/index.js 2:16-43 中出现错误:找不到模块: 错误:无法解析“流” '/var/www/tok/node_modules/cipher-base'

重大变更: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.

如果你想包含一个polyfill,你需要:

  • 添加后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
  • 安装'stream-browserify'如果你不想包含polyfill,你可以使用一个空模块,如下所示:resolve.fallback: { “流”:假}

./node_modules/keccak/lib/api/keccak.js 中的错误 1:22-39 模块不存在 发现:错误:无法解析“流” '/var/www/tok/node_modules/keccak/lib/api'

重大变更: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.

如果你想包含一个polyfill,你需要:

  • 添加后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
  • 安装'stream-browserify'如果你不想包含polyfill,你可以使用一个空模块,如下所示:resolve.fallback: { “流”:假}

./node_modules/keccak/lib/api/shake.js 1:22-39 模块不存在错误 发现:错误:无法解析“流” '/var/www/tok/node_modules/keccak/lib/api'

重大变更: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.

如果你想包含一个polyfill,你需要:

  • 添加后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
  • 安装'stream-browserify'如果你不想包含polyfill,你可以使用一个空模块,如下所示:resolve.fallback: { “流”:假}

webpack 编译有 3 个错误

显然这个错误与Webpack配置有关。我该如何解决?有人可以帮助我吗?

javascript laravel vue.js webpack web3js
4个回答
5
投票

奔跑

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-scripts eject"
  },

2
投票

由于 webpack5 中删除了默认的 polyfill,您必须安装以下实用程序:

yarn add buffer util stream-browserify assert stream-http url https-browserify os-browserify

npm install buffer util stream-browserify assert stream-http url https-browserify 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 配置。


1
投票

您可以通过指定空后备来修复它,如下所示:

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
投票

如果您的错误像这样开始“找不到模块:错误:无法解析'http'...”,安装

url-loader
就可以解决问题。只需使用 npm 安装即可。
npm install --save-dev url-loader

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.