React.js 不服务 stream package 到 FE => 无法在 Hash.CipherBase (index.js:7:1) 处读取未定义（读取“调用”）的属性

Question

完整错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at Hash.CipherBase (index.js:7:1)
    at new Hash (browser.js:9:1)
    at Object.createHash (browser.js:29:1)
    at browser.js:60:1
    at new Promise (<anonymous>)
    at sha512 (browser.js:59:1)
    at browser.js:223:1
    at async encryptWithPublicKey (SellerCreateProductPage.js:109:1)

在代码中的这一品脱：

let data = await EthCrypto.encryptWithPublicKey(pk,pk);

（我正在尝试用自己加密公钥）

我正在尝试在我的 React.js 应用程序中使用模块“eth-crypto”。 首先，当我导入它时，出现错误提示 webpack 5.0 不向前端提供诸如 crypto 和 stream 之类的包。 我通过创建这个config.override.js文件解决了这个问题：

const { ProvidePlugin } = require('webpack');

module.exports = function (config, env) {
    return {
        ...config,
        module: {
            ...config.module,
            rules: [
                ...config.module.rules,
                {
                    test: /.(m?js|ts|tsx)$/,
                    enforce: 'pre',
                    use: ['source-map-loader'],
                },
            ],
        },
        plugins: [
            ...config.plugins,
            new ProvidePlugin({
                process: 'process/browser',
                Buffer: ['buffer', 'Buffer'],
            }),
        ],
        resolve: {
            ...config.resolve,
            fallback: {
                "stream": require.resolve('stream-browserify'),
                "crypto": require.resolve('crypto-browserify'),
            },
        },
        ignoreWarnings: [/Failed to parse source map/],
    };
};

并更新了package.json脚本以与 react-app-rewired 一起运行：

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

我怀疑“流”package 有问题，但我找不到将其正确提供给前端的方法。

Answer 1

修复。 必须：

1. 删除节点模块
2. 从 package.json 中删除“流”
3. 运行npm install
4. 运行npm install readable-stream
5. 更新config-overrides.js ：

• 改变"stream": require.resolve('stream-browserify'),到"stream": require.resolve('readable-stream'),

6. 重新启动反应应用程序