导入 ReactJS 时出现“未捕获的语法错误：无法在模块外使用 import 语句”

Posted 2023-02-22

【中文标题】导入 ReactJS 时出现“未捕获的语法错误：无法在模块外使用 import 语句”

【英文标题】："Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ReactJS

【发布时间】：2021-05-15 19:11:38

【问题描述】：

今天我决定尝试学习 React，但是每当我尝试导入以下两个模块时：

import React from "react"
import ReactDOM from "react-dom"

我得到错误：

未捕获的语法错误：无法在模块外使用 import 语句

这是我尝试创建 React 程序的步骤：

安装 NodeJS 将 NodeJS 添加到环境变量中 为我的程序创建新文件夹 在我的文件夹中创建 html、CSS 和 JS 文件

为什么会出现此错误，我该如何解决？

【问题讨论】：

你从哪里得到的说明？你在使用 TypeScript 吗？你的节点版本是多少？

我从 YouTube 获得了说明。它说要安装 NodeJS，然后它展示了如何设置一个 React 应用程序，但我没有像它显示的那样设置一个 React 应用程序，因为在我正在关注的学习 React 的视频中，我不认为他们创建了一个 React 应用程序。他们只是使用进口。这是 React 教程视频：youtube.com/watch?v=DLX62G4lc44 我使用的是 javascript，而不是 TypeScript。我的节点版本是 14.15.5。另外，请注意，我不小心在帖子中提到我必须安装 React，而我的意思是我必须安装 Node。

听起来你还没有安装任何节点模块。你应该从 React 教程开始。

【参考方案1】：

您需要将此添加到您的 package.json 中，它应该可以工作。如果你打算使用 es6 import 语句，你需要告诉节点你正在使用 package.json 中的模块，就像这样。

"type": "module",

【参考方案2】：

我想这是你第一次使用 React 吗？我看到你已经安装了NodeJs，太好了！

我建议您开始使用完整的 React 应用，例如 Create React App。

https://create-react-app.dev/

【讨论】：

是的，我很高兴学习！非常感谢您的帮助！