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;
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.
--experimental-modules anymore, you can simply run node app.js
Commented
Jul 3, 2021 at 16:26
require, how do I resolve it? Thanks
"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.
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 ....
Add this to package.json:
{"type": "module"}
"name": "server" etc. I usually put it just under the "main": "index.js"
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"
}
}
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"
}
Just Change this:
export default App;
To this:
module.exports = App;
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"; trueAnother example :
import Users from "../models/UserModel"; incorrect
import Users from "../models/UserModel.js"; correctI don't know why it has to be like this, but when I try the problem is resolved. I hope this helps
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')
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.
adding the "type": "module" line in your package.json file and instead rename your app.js file (or whatever) to app.mjs.
Add the "type": "module" line in your package.json file and that is all.
{
"type": "module"
}
Downgrade your node version from 23 to 18
I have switched to v18.17.1 (npm v9.6.7) this and installed npm install -g eas-cli
Now the error is gone and this command executes flawlessly. npx eas build -p android --profile preview
--project express-server/tsconfig.json. github.com/TypeStrong/ts-node#loading-tsconfigjson