Home > Software engineering >  React Error: Child compilation failed: Must use import to load ES Module
React Error: Child compilation failed: Must use import to load ES Module

Time:04-28

I have done a react project on my ubuntu system and uploaded on github, now I am cloning that same repository on my windows system and doing npm install and npm start. It is showing this errors.

Check these images [1]: https://i.stack.imgur.com/3cKFp.png [2]: https://i.stack.imgur.com/v5OHz.png

I am bit new to react so please help me to fix this issue. My npm version on windows is 8.7.0 and node version is 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

CodePudding user response:

The answer is in the error itself. You are using require in your universal js which is not supported, please use import instead

CodePudding user response:

@Ritesh Jagga - where I can find my webpack config file in my project ?

@xXx_Hacker_xXx - But I have not used any package or file named universal.js. There is no file named universal.js in my whole project.

  • Related