如何在Webpack 5中填充Node核心模块

我喜欢保持简单，不需要运行npm run-script eject直到这里，所以我将版本降级回react-scripts@4.0.3而不是5.0.0。 到目前为止，Webpack仍然没有解决这个问题。

可悲的是，这包括了一堆已经退役的软件包。

我的问题是我试图使用JSON.parse，然后当我开始编写时，自动完成显示了json（注意小写），尽管我将其重命名为JSON。当我按下回车键时，它会自动导入(import { json } from "express/lib/response";)。这就是问题的原因，我完全没有注意到，后来在开发中我的应用程序崩溃了，花了我大约六个小时才注意到，因为应用程序相当大。
所以，如果以上解决方案都不起作用，只需查看是否未导入某些内容即可。

我尝试了尽可能多的解决方案，但令人惊讶的是，它们都对我无效。除了降级选项。但这又创建了另一个问题。在那个节点版本中，Framer motion无法工作。所以我尝试跟踪控制台日志。打开后，我发现流丢失了。所以我只需使用（npm i stream）安装该依赖项即可解决问题。也许对您来说情况不同。但只需安装缺少的依赖项即可解决问题，而无需编写更多代码。

对于我来说（使用React => v17; React scripts => v5; webpack => v5），@Letton和@Richie Bendall建议的解决方案组合起来可以工作，另外还需要添加以下包并进行安装。请注意，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-overrides.js添加到根目录，并将package.json中的脚本内容从react-scripts更改为react-app-rewired，问题得以解决。

错误：[webpack < 5默认情况下会包含node.js核心模块的polyfills。

现在不再是这样了。请验证您是否需要此模块并为其配置polyfill。

回答： node_modules > react-scripts > config > webpack.config.js
在webpack.config.js文件中添加：

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

对我来说，我只是删除了一个未使用的导入，叫做：

import res from "express/lib/response"

它已经修复了！

虽然这个答案并没有直接涉及到polyfill，但有时候你应该评估一下是否真的需要一个需要polyfill的库。我们不应该重新发明轮子，但同时这也带来了一些缺点，特别是当你试图从一个版本迁移到另一个版本时。我在从Angular 7升级到12的过程中遇到了一个非常类似的问题。在我的情况下，在一个组件中我们正在使用util.isArray。解决方案是将util.isArray替换为Array.isArray并从组件中移除util导入。这不仅帮助我们摆脱了这个库，还确保我们不需要进行polyfill。