React应用构建失败,显示’ERR_REQUIRE_ESM’错误。

huangapple go评论79阅读模式
英文:

react app build fails with 'ERR_REQUIRE_ESM'

问题

当我尝试运行我的React应用程序的构建命令时,我看到以下错误导致构建失败:

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.

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

这导致了一个重大问题,因为每次进行更改后,我们都必须手动部署应用程序。

这在两周前还能正常工作,我可以确认没有添加新的包,也没有更新任何包。

我尝试过什么?

  • 升级了Node、npm、yarn,但都没有起作用
  • 运行了yarn cache clean
  • 运行了yarn audit fix --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"
英文:

When I am trying to run the build command for my react application I am seeing this error failing the build:


var stripAnsi = require(&#39;strip-ansi&#39;);
                ^

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.&lt;anonymous&gt; (C:\Users\rahul\Documents\project_name\node_modules\react-dev-utils\FileSizeReporter.js:15:17)
    at Object.&lt;anonymous&gt; (C:\Users\rahul\Documents\project_name\node_modules\react-scripts\scripts\build.js:35:26) {
  code: &#39;ERR_REQUIRE_ESM&#39;
}
error Command failed with exit code 1.

But when I delete the lockfile and re-run the build command, it executes successfully. Then again the new builds fails until the lockfile is removed.

This is causing a major issue as we have to manually deploy the application every time a change has been done.

This has been working fine two weeks ago and I can confirm neither new packages have been added nor any package has been updated

What I have tried?

  • upgrading node, npm, yarn but nothing worked
  • yarn cache clean
  • yarn audit fix --force

Build command used:
react-scripts build

Enviroment:

node: 16.19.0
npm: 9.8.1
yarn: 1.22.19

React packages version

    &quot;react&quot;: &quot;^17.0.2&quot;,
    &quot;react-dom&quot;: &quot;^17.0.2&quot;,
    &quot;react-scripts&quot;: &quot;^5.0.0&quot;,

答案1

得分: 1

"唯一解决方法我找到的是在 package.json 中将 strip-ansi 强制降级到 6.0.0 或 6.0.1。在 7.0.0 中它变成了纯 ESM。类似这样:

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

如果你使用 npm 而不是 yarn(虽然我看到楼主不是这样做的,但对于其他人来说),那么可以使用一个覆盖项:

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

英文:

The only way I have found around this is a resolution in package.json forcing strip-ansi down to 6.0.0 or 6.0.1. It became pure ESM in 7.0.0. Something like this:

{
  ...
  &quot;resolutions&quot;: {
    &quot;strip-ansi&quot;: &quot;6.0.0&quot;
  }
}

If you use npm rather than yarn (which I see the OP isn't, but for others), then use an override:

{
  ...
  &quot;overrides&quot;: {
    &quot;strip-ansi&quot;: &quot;6.0.0&quot;
  }
}

huangapple
  • 本文由 发表于 2023年7月24日 18:09:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76753440.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定