(节点: 9374)警告: 要加载 ES 模块，请设置“ type”: “ module”

我今天才开始学习《反应》。 如何在 VisualStudio 的终端中消除控制台上的错误消息。

(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;
174140 次浏览
小开

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.

小开

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

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

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.

小开

You just need to update package.json like this,

{"type": "module"}

It's worked for me, Thanks!

小开

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

小开

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


提交答案