(node:9374) Warning: To load an ES module, set "type": "module"
JavascriptReactjsEs6 ModulesJavascript Problem Overview
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;
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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 - Javascript
You just need to update package.json like this,
{"type": "module"}
It's worked for me, Thanks!
Solution 4 - Javascript
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 - Javascript
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 - Javascript
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 - Javascript
adding the "type": "module" line in your package.json file and instead rename your app.js file (or whatever) to app.mjs.