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

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;

Solution 1:^[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.

Solution 2:^[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 ....

Solution 3:^[3]

You just need to update package.json like this,

{"type": "module"}

It's worked for me, Thanks!

Solution 4:^[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"
  }
}

Solution 5:^[5]

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.

Solution 6:^[6]

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

Solution 7:^[7]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Penny Liu
Solution 3
Solution 4	Lotpite
Solution 5	dieguiviti
Solution 6	Jarrett
Solution 7	user15089589

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]