CODEWITHSUNDEEP
javascriptreactjswebpackcompiler-errorsruntime-error
Arunava Roy
Arunava Roy

Reputation: 43

React Error: Child compilation failed: Must use import to load ES Module

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.sstatic.net/3cKFp.png [2]: https://i.sstatic.net/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

Upvotes: 4

Views: 1720

Answers (2)

Jingi
Jingi

Reputation: 46

It seems that you have a problem with your node version. Most of the react component to run on node version 16. Upgrade your node version and I think it will solve your issue.

Upvotes: 3

Itgelt Gankhulug
Itgelt Gankhulug

Reputation: 133

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

Upvotes: -1

Related Questions