（节点：9374）警告：要加载 ES 模块，请设置“类型”：“模块”答案

【问题标题】：(node:9374) Warning: To load an ES module, set "type": "module"（节点：9374）警告：要加载 ES 模块，请设置“类型”：“模块”
【发布时间】：2020-12-14 17:27:29
【问题描述】：

我今天刚开始学习 React。如何在 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;

【问题讨论】：

这能回答你的问题吗？ Node.js - SyntaxError: Unexpected token import
在 monorepo（Angular + Express + 单个 package.json）中使用 ts-node 时遇到了同样的问题。显式指定 tsconfig.json 的路径修复了问题：--project express-server/tsconfig.json。 github.com/TypeStrong/ts-node#loading-tsconfigjson

标签： javascript reactjs es6-modules

【解决方案1】：

你只需要像这样更新package.json，

{"type": "module"}

它对我有用，谢谢！

【讨论】：

【解决方案2】：

您还使用不正确的 React Fragments 围绕 return 语句。您的退货声明应如下所示：

 import React from "react";
 import "./App.css";

 function App() {
   return (
    <>
      <h1>ToDo</h1>
    </>
   );
 }

export default App;

我很确定这一直是您问题的根源，而不是模块导入/导出问题。

【讨论】：

你需要吗？ h1 本身不是一个反应元素吗？认为添加片段不是必需的/不是解决方案。

【解决方案3】：

这是我的方法：

1 - 像这样更新 package.json：

  "main": "index.js",
  "type":"module",

2 - 导入时使用.js，例如：

import {isPrime} from './isPrime.js';

3 - 这里是 isPrime.js

export const isPrime ....

【讨论】：

我试过这个，它似乎工作。为什么我必须添加“.js”？这似乎不对 - 我希望它能够自动找出它需要“.js”文件而无需指定扩展名。编辑：这显然是一个持续的讨论：github.com/microsoft/TypeScript/issues/16577
我正在从我的项目中删除 Babel，这对我有用

【解决方案4】：

在 package.json 中添加 Type: 模块 - 帮助:)

package.json 包含：

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

【讨论】：

【解决方案5】：

首先，安装最新版本的 Node.js。它具有最新和最强大的功能。

其次，在package.json 文件中添加"type": "module" 行。

{

  "type": "module"

}

第三，调用nodejs时使用--experimental-modules标志：

node --experimental-modules app.js

你应该很高兴！

另一种方法是避免在 package.json 文件中添加 "type": "module" 行，而是将 app.js 文件重命名为 app.mjs。

注意，现在require() 语法将停止工作。

【讨论】：

你不再需要添加标志--experimental-modules，你可以简单地运行node app.js
这可能会导致 "ReferenceError: require is not defined" 错误，如果您有如下声明：require('dotenv').config();
有几个包需要require，如何解决？谢谢
@Jeb50 你解决了吗？我正在寻找答案
@Jack 看看是否有帮助。 stackoverflow.com/a/68914705/5063031