我想这里的大部分答案都能解决你的问题。然而，如果你的节点开发不需要Polyfills，那么我建议在Webpack模块配置中使用target: 'node'。这帮我解决了这个问题。

这里有一些关于答案的文档:https://webpack.js.org/concepts/targets/

我在create-react-app中遇到了这个问题

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"

我通过将react-scripts更改为4.0.3版本来解决这个问题。

你需要React => v17 React脚本=> v5 webpack => v5

解决问题

1)安装

"fs": "^2.0.0",  // npm i fs
"assert": "^2.0.0",  // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http

2)在根目录下创建config-override .js 图像

3)在config-override .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.json

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

问题解决了:)

我的问题是，我试图使用JSON。解析，然后当我开始写，自动完成显示我json(注意小字母)，尽管我重命名为json。当我按回车键时，它自动导入 (import {json} from "express/lib/response";) 这是原因，我根本没有注意到，在后来的开发过程中，我的应用程序非常糟糕，我花了大约6个小时才注意到这一点，因为应用程序相当大。

所以如果上面的解决方案都不起作用，看看你是否没有导入一些东西。

根据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/];

Secret的答案几乎对我有用(我还没有足够的声誉来评论，抱歉!)

按照他们的回答，然后告诉我，因为在eslint的要求版本的差异，我应该添加SKIP_PREFLIGHT_CHECK=true到项目中的.env文件，所以我只是把它添加到我现有的一个。

然后它将成功构建(终于!)但后来我注意到，至少在Chrome中，我无法点击任何东西，甚至无法选择任何文本。事实证明，在检查器中仍然有一个Iframe在所有可以删除的东西之上。-这适用于运行一个开发版本，npm run start，我不确定它是否适用于生产版本。

我必须说，在我看来，这种突然的变化真的没有经过很好的考虑!