反应应用程序构建失败并显示“ERR_REQUIRE_ESM”

Question

当我尝试为我的反应应用程序运行构建命令时，我看到此错误导致构建失败：

var stripAnsi = require('strip-ansi');
                ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\rahul\Documents\project_name\node_modules\strip-ansi\index.js from C:\Users\rahul\Documents\cambian\cambian-widget-client\node_modules\react-dev-utils\FileSizeReporter.js not supported.
Instead change the require of index.js in C:\Users\rahul\Documents\project_name\node_modules\react-dev-utils\FileSizeReporter.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\rahul\Documents\project_name\node_modules\react-dev-utils\FileSizeReporter.js:15:17)
    at Object.<anonymous> (C:\Users\rahul\Documents\project_name\node_modules\react-scripts\scripts\build.js:35:26) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.

但是当我删除锁定文件并重新运行构建命令时，它执行成功。然后，新的构建再次失败，直到锁定文件被删除。

这导致了一个主要问题，因为每次进行更改时我们都必须手动部署应用程序。

两周前一直运行良好，我可以确认既没有添加新的软件包，也没有更新任何软件包

我已经尝试过什么？

• 升级node、npm、yarn但没有任何效果
• 纱线缓存清理
• 纱线审计修复--force

使用的构建命令： react-scripts build

环境：

node: 16.19.0
npm: 9.8.1
yarn: 1.22.19

React 包版本

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",

Answer 1

我发现解决这个问题的唯一方法是在 package.json 中强制strip-ansi降低到 6.0.0 或 6.0.1 的分辨率。在 7.0.0 中它变成了纯粹的 ESM。像这样的东西：

{
  ...
  "resolutions": {
    "strip-ansi": "6.0.0"
  }
}

如果你使用npm而不是yarn（我认为OP不是，但对于其他人），那么使用覆盖：

{
  ...
  "overrides": {
    "strip-ansi": "6.0.0"
  }
}