143

I just started to learn React today. How do I get rid of that error message on my Console in the Terminal in Visual Studio.

(node: 9374)Warning: To load an ES module,
 set "type": "module" in the package.json or use the .mjs extension. 
/Users/nishihaider/workspace-ui/react-todo-app/src/App.js:1
import React from "react";
import "./App.css";

function App() {
  <>
  return (
  <h1>ToDo</h1>
  );
  </>
}

export default App;
2

10 Answers 10

163

First, install the latest version of Node.js. It has the latest and greatest features.

Second, add the "type": "module" line in your package.json file.

{

  "type": "module"

}

Third, use the --experimental-modules flag when invoking nodejs:

node --experimental-modules app.js

You should be good to go!

An alternative is to avoid adding the "type": "module" line in your package.json file and instead rename your app.js file to app.mjs.

Note that now the require() syntax will stop working.

15
  • 13
    you don't need to add the flag --experimental-modules anymore, you can simply run node app.js Commented Jul 3, 2021 at 16:26
  • 5
    Have a few packages needs require, how do I resolve it? Thanks
    – Jeb50
    Commented Aug 24, 2021 at 21:53
  • 1
    @Jack See if helps. stackoverflow.com/a/68914705/5063031
    – Jeb50
    Commented Sep 17, 2021 at 16:07
  • 1
    Everyone recommends this but no one warns that since added "type": "module" each require() statement must be removed even in dependencies so this solution is not acceptable. Now some packages use require and another import, nightmare, no compatibility between it.
    – mikep
    Commented Aug 26, 2022 at 7:49
  • 1
    I don't recommend upgrading to the latest node version anymore - By downgrading from latest to LTS you resolve this issue without any of the hacks or manual updates with consequences (import vs require). This problem should be resolved in the future once the latest node version catches up.
    – RobSteward
    Commented Jun 22 at 9:18
48

Here is my approach:

1 - Update package.json like:

  "main": "index.js",
  "type":"module",

2 - use.js when importing, like:

import {isPrime} from './isPrime.js';

3 - here is isPrime.js

export const isPrime ....
2
  • 2
    I tried this, and it seems to work. Why do I have to add ".js" though? That doesn't seem right - I would expect it to automatically figure out that it needs the ".js" file without having to specify the extension. Edit: It's apparently an ongoing discussion: github.com/microsoft/TypeScript/issues/16577
    – Lebbers
    Commented Mar 18, 2021 at 1:02
  • I was removing Babel from my project and this works for me Commented Apr 26, 2021 at 22:58
31

Add this to package.json:

{"type": "module"}
3
  • 4
    Where did you put this in package.json? Commented May 27, 2022 at 16:01
  • 2
    You put it at the root level, so same level as "name": "server" etc. I usually put it just under the "main": "index.js"
    – umbriel
    Commented Sep 21, 2022 at 14:41
  • 1
    Funny enough, mine already has that.
    – Patrick
    Commented May 6 at 1:19
18

to add Type: module in package.json - helps :)

package.json contain:

{
  "name": "react_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  }
}
10

For those using TypeScript with node.js, and is trying to use the import statement. I have found that setting the module to value es2015 in the tsconfig.json gives this error, while setting it to commonjs works.

tsconfig.json

    {
     "module": "commonjs"
    }
4

Just Change this:

export default App;

To this:

module.exports = App;
1
  • The error is on the import, which this change will not resolve. Commented Aug 15, 2022 at 21:56
2

I have a parent file importing child components, so I get same problem about ES module. in my case, I must define more details when i import the component. like this:

import db from "../config/Database"; false
import db from "../config/Database.js"; true

Another example :

import Users from "../models/UserModel"; incorrect
import Users from "../models/UserModel.js"; correct

I don't know why it has to be like this, but when I try the problem is resolved. I hope this helps

1

you are also sorrounding the return statement with React Fragments which is not correct. Your return statement should look like the following:

 import React from "react";
 import "./App.css";

 function App() {
   return (
    <>
      <h1>ToDo</h1>
    </>
   );
 }

export default App;

I'm quite sure this was the source of your issues all along and not the module import/export issue.

2
  • Do you need to? Isn't a h1 a react element in its own right? Think the addition of the fragement is not necessary / not a solution.
    – Jeremy
    Commented Dec 28, 2021 at 21:47
  • This would not cause the import on the first line to fail. Commented Aug 15, 2022 at 21:57
1

adding the "type": "module" line in your package.json file and instead rename your app.js file (or whatever) to app.mjs.

1

SIMPLE AND FAST SOLUTION FOR BEGINNERS

1 RENAME YOUR JS FILE MJS LIKE (hello.js > hello.mjs)

2 GIVE MJS FILE NAME IN YOUR EXPORT LIKE ( import { first } from './pg.mjs')

1
  • What is the explanation for this "solution"? What is a mjs file anyway? Commented Feb 12, 2023 at 19:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.