我在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版本来解决这个问题。

NPM install path-browserify 然后尝试更改webpack配置以包括:

module.exports = {
    ...
    resolve: {
        alias: {
            path: require.resolve("path-browserify")
        }
    }
};

错误:[webpack < 5用于默认包含node.js核心模块的腻子。

现在情况已经不同了。验证你是否需要这个模块，并为它配置一个填充。

答: Node_modules > react-scripts > config > webpack.config.js

在webpack.config.js文件中添加:

resolve: {
      fallback: { 
        "http": require.resolve("stream-http") ,
         "path": require.resolve("path-browserify") 
        },
}

方法1

开放项目/ node_modules react-scripts / config / webpack.config.js 在回退中添加"crypto": require.resolve("crypto-browserify")

resolve: {
   fallback: {
       "crypto": require.resolve("crypto-browserify")
   }
} 

安装npm i crypto-browserify 重新启动应用程序。

如果你提交，上面的方法是无效的，因为我们不是node_modules

方法2

安装补丁包:纱线添加补丁包 安装所需的填料。(做一个应用程序的初始构建，它会告诉你。) 修改node_modules / react-scripts / config / webpack.config.js。举个例子。这是从Webpack的文档中截取的。

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

不要添加所有的，只添加你需要的。

在修改webpack之前，请确保先安装这些包 配置。

运行yarn patch-package react-scripts。这将生成一个补丁(这应该在你的回购中提交)。 向包中添加postinstall脚本。Json: "postinstall": "yarn patch-package"。现在，任何时候，有人在这个项目上安装npm deps，都会自动应用你在步骤3中创建的补丁。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "yarn patch-package"
  },

面对同样的问题，这里有一个解决方案:

删除package-lock。Json从项目文件夹和NPM卸载webpack 将react-script从5降级为4.0.3 确保包锁。Json被删除/删除 使用npm Install webpack@4.44.2安装webpack 最后，使用终端运行npm install

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

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

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

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