我的环境是这样的:

React => v17 React脚本=> v5 Webpack => v5

要解决这个问题，请遵循下面的说明

1-安装以下软件包

yarn add 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; }

3-像下面这样修改packages.js

"脚本":{ “start”:“react-app-rewired start”， “build”:“react-app-rewired build”， “test”:“react-app-rewired test” "eject": "react-app-rewired eject" }，

当我重新安装节点模块时，我的webpack当前版本是5.38.1，我已经修复了这个问题 安装后，你必须更新你的webpack.config.js resolve{} with 回退:{"fs": false， "path": require.resolve("path-browserify")}而不使用"fs": false它显示错误，即:模块未找到:错误:无法解析'fs'在'/YOUR DIRECTORY…' 所以别忘了加上它;与其他东西看起来像:

module.exports = {
   ...
   resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  },
};

如果你的webpack.config.js文件中存在node属性，删除它

在create-react-app v17和脚本5.0.0中，你需要在webpack.config.js中添加一个备份，并安装'process'。

   `module.exports = function (webpackEnv) {
      .........
      return {
       .........
      resolve: {
      ..........
      fallback: { "process": require.resolve("process/browser") },`

所有其他答案都遗漏了一个重要的部分:如何不填充节点核心模块。 如果错误来自你的依赖项的依赖项中的某个模块，而你实际上并不需要，你可以完全忽略它。 在这种情况下，最简单的解决方法是添加到包中。Json这些行:

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

如果需要忽略其他核心节点模块，也可以这样做。

这种方法适用于默认情况下实际webpack配置不能直接访问的框架(比如Angular)。

在寻找不同的错误时，我已经找到了这个解决方案。

对于我(使用React => v17;React脚本=> v5;webpack => v5)，由@Letton和@Richie Bendall建议的解决方案组合与另一个附加，即包一起工作。Json中，必须添加并安装以下包。还请注意fs版本“^2.0.0”抛出一个错误，因此更改为“0.0.1-security”。

"assert": "^2.0.0", 
"https-browserify": "^1.0.0", 
"os": "^0.1.2",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.1.9",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"fs":"^0.0.1-security",
"crypto-browserify": "3.12.0",
"buffer":"^6.0.3",
"node-polyfill-webpack-plugin": "^2.0.1"

安装完这些后，执行剩下的步骤，即将config-override .js添加到根目录，并更改包中的脚本内容。从react-scripts到react-app-rewired的Json修复了这个问题。

根据Web3文档:

如果你使用的是create-react-app版本>=5，你可能会遇到构建问题。这是因为最新版本的create-react-app中没有包含NodeJS的polyfills。

解决方案:

安装react-app-rewired和缺少的模块

如果你用的是纱线:

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

如果你正在使用npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

在项目文件夹的根目录下创建config-override .js，内容如下:

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

内包。Json改变脚本字段启动，构建和测试。用react-app-rewired代替react-scripts 之前:

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

后:

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

缺少的Nodejs polyfills现在应该包括在内，你的应用程序应该可以使用web3。

如果你想隐藏控制台创建的警告:

在config-override .js的override函数中，添加:

config.ignoreWarnings = [/Failed to parse source map/];