"Uncaught SyntaxError: Cannot use import statement outside a module" 在引入ReactJS时的错误提示

Question

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

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

我遇到了以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

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

1. 安装NodeJS
2. 将NodeJS添加到环境变量中
3. 在我的文件夹中创建新的HTML、CSS和JS文件

我为什么会遇到这个错误，如何修复它？

- Illusion705

---

你从哪里得到了这些指令？你在使用TypeScript吗？你的node版本是多少？ - Phix

我从YouTube上得到了指示。它说要安装NodeJS，然后展示如何设置React应用程序，但我没有像视频中展示的那样设置React应用程序，因为在我学习React的视频中，我认为他们没有创建React应用程序，只是使用了import。这是React教程视频：https://www.youtube.com/watch?v=DLX62G4lc44 我正在使用JavaScript，而不是TypeScript。我的node版本是14.15.5。另外，请注意，我在帖子中错误地写成了我必须安装React，而我实际上是要安装Node。 - Illusion705

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

Answer 1

我也是React的新手，使用Visual Studio 2022在MVC项目中编写React代码。我创建了一个与https://github.com/narendra315/yt-210911-react-login-page/blob/master/src/LoginComponent2.js完全相同的登录页面，并遇到了相同的错误：

Uncaught SyntaxError：无法在模块外部使用import语句

通过删除末尾的import和export行来解决了这个问题。我用以下代码替换了export行：

ReactDOM.render(<LoginComponent />, document.getElementById('content'));

其中，LoginComponent是我的类名，content是Index.cshtml页面的id。这样做解决了我的问题。

- A.Muqtadir

Answer 2

你需要将以下代码添加到你的 package.json 文件中，这样应该就可以正常工作了。如果你要使用 es6 的 import 语句，你需要在 package.json 中告诉 node 你正在使用模块，像这样：

"type": "module",

- Jordan

---

如果是这样的话，那么为什么当 package.json 生成时 Node 不默认插入它呢？ - tagaism

Answer 3

我猜这是你第一次使用React？我看到你已经安装了NodeJs，这很棒！

我建议你从一个完整的React应用程序开始，比如Create React App。

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

- Benjamin

---

是的，我非常兴奋地学习！非常感谢您的帮助！ - Illusion705