Cannot use import statement outside a module [React TypeScript 错误的处理方法]
在构建一个 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 中如何修复它们。
