React错误：子编译失败：必须使用import加载ES模块。

Question

我在我的Ubuntu系统上完成了一个React项目并上传到Github上，现在我正在我的Windows系统上克隆那个同样的代码库（repository），并执行npm install和npm start。但是它显示出以下错误:

请查看这些图片 [1]: https://istack.dev59.com/3cKFp.webp [2]: https://istack.dev59.com/v5OHz.webp

我对React还有点新，请帮助我解决这个问题。我的Windows上的npm版本是8.7.0，node版本是v12.16.3.

 Compiled with problems:X 
ERROR

Must use import to load ES Module: C:\Users\user\Desktop\port\frontend\node_modules\@eslint\eslintrc\universal.js
require() of ES modules is not supported.
require() of C:\Users\user\Desktop\port\frontend\node_modules\@eslint\eslintrc\universal.js from C:\Users\user\Desktop\port\frontend\node_modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\user\Desktop\port\frontend\node_modules\@eslint\eslintrc\package.json.


ERROR

  Error: Child compilation failed:
  Must use import to load ES Module: C:\Users\user\Desktop\port\frontend\node_modules\@eslint\eslintrc\universal.js
  require() of ES modules is not supported.
  require() of C:\Users\user\Desktop\port\frontend\node_modules\@eslint\eslintrc\universal.js from C:\Users\user\Desktop\port\frontend\node  _modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module"   which defines all .js files in that package scope as ES modules.
  Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\user\Desk  top\port\frontend\node_modules\@eslint\eslintrc\package.json.
  
  - child-compiler.js:169 
    [frontend]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:564 
    [frontend]/[webpack]/lib/Compiler.js:564:11
  
  - Compiler.js:1183 
    [frontend]/[webpack]/lib/Compiler.js:1183:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [frontend]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1179 
    [frontend]/[webpack]/lib/Compiler.js:1179:33
  
  - Compilation.js:2784 finalCallback
    [frontend]/[webpack]/lib/Compilation.js:2784:11
  
  - Compilation.js:3089 
    [frontend]/[webpack]/lib/Compilation.js:3089:11
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [frontend]/[tapable]/lib/Hook.js:18:14

- Arunava Roy

---

请分享你的Webpack配置。 - Ritesh Jagga

Answer 1

看起来您的Node版本存在问题。大部分React组件需要在Node版本16上运行。请升级您的Node版本，我认为这将解决您的问题。

- Jingi

---

谢谢，我曾经苦苦寻找解决方案，结果发现只是因为我使用的旧版 Node 有问题。 - Antonio Mora Bautista

Answer 2

答案就在错误信息里。你在通用的js中使用了require，这是不支持的，请改用import。

- Itgelt Gankhulug