(node:9374) Warning: To load an ES module, set "type": "module"

Question

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;

Substrate

Does this answer your question? Node.js - SyntaxError: Unexpected token import – Electric

Had the same problem when using ts-node in a monorepo (Angular + Express + single package.json). Explicitly specifying the path to the tsconfig.json fixed the problem: --project express-server/tsconfig.json. github.com/TypeStrong/ts-node#loading-tsconfigjson – Keffer

Answer 1

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.

Pontifical

you don't need to add the flag --experimental-modules anymore, you can simply run node app.js – Stockjobber

This may end up with "ReferenceError: require is not defined" error in cases you have declaration like: require('dotenv').config(); – Godrich

Have a few packages needs require, how do I resolve it? Thanks – Calibrate

@Calibrate did you solve that? I'm looking for some answer – Wabash

@Wabash Don't remember what I did, as I check now still using require. Definitely not adding "type": "module". – Calibrate

@Calibrate "type":"module" definitely isn't going to work for me either. Do you remember if you was having issues to install webpack before getting into this error? – Wabash

@Wabash I might have rolled back as TOO MUCH work to convert. Will let you know if it rings. :) – Calibrate

@Wabash See if helps. https://mcmap.net/q/82824/-how-to-do-import-and-require-together – Calibrate

@Calibrate the issue is, a thrid-party library uses alot of requires and I cannot change that. I fixed the require in my own code then I got erros about the thrid-party ones. – Wabash

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. – Whiffletree

Is this still current? Does javascript still have 5 ways to use modules? – Allelomorph

ok, but what if it's just one file , in a folder , and you don't even have a package.json, because you're just testing a specific thing.... do you necessarily need to add package.json? – Immanuel

Answer 2

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 ....

Salish

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 – Ventail

I was removing Babel from my project and this works for me – Kinesics

Answer 3

You just need to update package.json like this,

{"type": "module"}

It's worked for me, Thanks!

Cutis

Where did you put this in package.json? – Uke

You put it at the root level, so same level as "name": "server" etc. I usually put it just under the "main": "index.js" – Chartreuse

Answer 4

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"
  }
}

Loferski

Answer 5

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"
    }

Trossachs

Answer 6

Just Change this:

export default App;

To this:

module.exports = App;

Richy

The error is on the import, which this change will not resolve. – Epicurus

Answer 7

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

Uboat

Answer 8

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.

Goner

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. – Illusive

This would not cause the import on the first line to fail. – Epicurus

Answer 9

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

Israel

Answer 10

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')

Boastful

What is the explanation for this "solution"? What is a mjs file anyway? – Sochor