原文： Cannot use import statement outside a module [React TypeScript Error Solved]

在构建一个 Web 应用程序时，你可能会遇到 SyntaxError: Cannot use import statement outside a module 错误。

当在后端使用 JavaScript 或 TypeScript 时，可能会出现这个错误。因此，你可能在客户端使用 React、Vue 等，仍然会遇到这个错误。

在客户端使用 JavaScript 时，你也可能遇到这个错误。

在这篇文章中，你将学习在将 TypeScript 或 JavaScript 和 Node 一起使用时，如何修复 SyntaxError: Cannot use import statement outside a module 错误。

你还将学习如何在客户端使用 JavaScript 时修复这个错误。

如何修复 TypeScript SyntaxError: Cannot use import statement outside a module 错误

在本节中，我们将使用 Express 来运行一个基本的 Node 服务器。

请注意，如果你在你的 Node 应用程序中使用最新版本的 TypeScript，tsconfig.json 文件有默认规则，可以防止出现 SyntaxError: Cannot use import statement outside a module 错误。

所以，如果你采取以下措施，很可能就不会遇到 SyntaxError: Cannot use import statement outside a module 错误：

  • 安装最新版本的 TypeScript，使用默认的 tsconfig.json 文件，该文件在你用 tsc init 运行最新版本时生成。
  • 为 Node 正确设置 TypeScript 并安装必要的包。

但我们假设你没有使用最新的 tsconfig.json 文件配置。

这里有一个 Express 服务器，它在 3000 端口监听，并将 “Hello World!” 记录到控制台：

import express from "express"

const app = express()

app.listen("3000", (): void => {
    console.log("Hello World!")
    // SyntaxError: Cannot use import statement outside a module
})

上面的代码看起来似乎应该完美地运行，但是出现了 SyntaxError: Cannot use import statement outside a module 错误。

这是因为我们使用了 import 关键字来导入一个模块：import express from "express"。

要解决这个问题，请到 tsconfig.json 文件中，滚动到模块部分。

你应该看到在模块部分下有这样一条特殊的规则：

/* Modules */
"module": "esnext"

为了解决这个问题，将值 “esnext” 改为 “commonjs”。

即：

/* Modules */
"module": "commonjs"

如何修复 JavaScript SyntaxError: Cannot use import statement outside a module 错误

在使用 vanilla JS 时，修复 SyntaxError: Cannot use import statement outside a module 错误与在 TypeScript 中修复这个错误有些不同。

这里是我们的服务器：

import express from "express";

const app = express();

app.listen(3000, () => {
    console.log("Hello World!");
    // SyntaxError: Cannot use import statement outside a module
});

产生了 SyntaxError: Cannot use import statement outside a module 错误，原因相同——我们使用了 import 关键字来导入一个模块。

要解决这个问题，到 package.json 文件中添加 "type": "module",，即：

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

现在你可以使用 import 关键字，不会出现错误。

在客户端使用 JavaScript 时（没有任何框架），要解决这个错误，只需在你想作为模块导入的文件的 script 标签上添加 type="module" 属性，如下：

<script type="module" src="./add.js"></script>

小结

在这篇文章中，我们讨论了 TypeScript 和 JavaScript 中的 SyntaxError: Cannot use import statement outside a module 错误。

这个错误主要是当你在 Node.js 中使用 import 关键字来导入一个模块时出现，或者当你在一个 script 标签中省略 type="module" 属性时出现。

我们看到了出现该错误的代码示例，以及在 TypeScript 和 JavaScript 中如何修复它们。

Happy coding!