无法在React应用程序中导入web3库

Question

./node_modules/cipher-base/index.js 中的错误 3:16-43

找不到模块：错误：无法解析“C:\Users\Sumana\Desktop\Web3\web3app\node_modules\cipher-base”中的“流”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - 安装 'stream-browserify' 如果你不这样做想要包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "stream": false }

Answer 1

您可以通过两种方式解决此问题。

• 删除node_module，然后在运行npm install后将您的react-scripts版本从“5.0.0”更改为“4.0.3”。

或者

• 配置 webpack。

1 - 安装这些软件包。

npm install fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

2 - 在项目的根目录中的 package.json 旁边创建 config-coverrides.js

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        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;
}

Answer 2

我上周也遇到了这个问题。在很多地方都有这样的记录。我不明白如何修复它，但似乎制作该库的人会修复它https://github.com/ChainSafe/web3.js/issues/4659