无法在 JavaScript 模块外使用 import 语句

作者

目录

Cannot use import statement outside module in JavaScript

  1. 无法在浏览器中的模块外使用 import 语句
  2. 不能在 Node.js 模块外使用 import 语句
  3. 无法在 TypeScript 模块外使用 import 语句

不能在浏览器模块外使用import语句

当我们在未作为模块加载的脚本中使用 ES6 模块语法时，会出现“SyntaxError: Cannot use import statement outside a module”。

要解决该错误，请在加载脚本时或在您的Node.js 应用程序type中将属性设置为。modulepackage.json

语法错误不能在模块外使用导入语句

要解决此错误，请在 HTML 代码中加载脚本时将type属性设置为。module

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>

    <!-- ✅ type set to module ✅ -->
    <script type="module" src="index.js"></script>
  </body>
</html>

现在您可以在 JavaScript 代码中使用 ES6 模块语法。

索引.js
import _ from 'lodash';

console.log(_.uniq([1, 1, 3])); // 👉️ [1, 3]

您在其中使用 ES6 模块语法的所有 JavaScript 文件都必须在加载时将属性type设置为module.

不能在 Node.js 模块外使用 import 语句

为了能够在 中使用 ES6 模块导入Node.js，请在您的文件中将type属性设置为
。modulepackage.json

包.json
{
  "type": "module",

  // 👇️ rest ...
  "dependencies": {},
  "devDependencies": {},
  "scripts": {}
}

如果您的项目没有package.json文件，请使用
npm init -y项目根目录中的命令初始化一个文件。

壳
npm init -y

现在您可以在 Node.js 应用程序中使用 ES6 模块语法。

索引.js
import _ from 'lodash';

console.log(_.uniq([1, 1, 3])); // 👉️ [1, 3]

导入type属性设置为 的本地文件时module，必须包含.js扩展名。

another-file.js这是一个导出函数的文件示例sum
。

另一个文件.js
// 👇️ named export
export function sum(a, b) {
  return a + b;
}

下面是我们如何将sum函数导入一个名为index.js.

索引.js
// 👇️ named import
import {sum} from './another-file.js';

console.log(sum(50, 50)); // 👉️ 100

确保在导入本地文件时指定扩展名。

如果省略扩展名，则会出现错误 –
Error [ERR_MODULE_NOT_FOUND]: Cannot find module X。

如果这些建议都没有帮助，请尝试将import/export语法替换为require().

索引.js
// 👇️ for default exports
const myFunction = require('some-package');

// 👇️ for named exports
const {someFunction} = require('some-package')

如果您决定使用该require()语法，则必须从您的文件中删除将type属性设置为的行。modulepackage.json

包.json
{
  // 👇️ if you use require(), REMOVE this line
  "type": "module",
}

请注意，您不能混合和匹配import/exportES6 语法和 CommonJSrequire()语法。

import/export如果您在文件中type
设置了属性，则您的项目只能使用语法。modulepackage.json

否则，您只需使用require()语法。

您可以在以下文章中阅读有关使用 ES6 导入/导出语法的更多信息
。

不能在 TypeScript 模块外使用 import 语句

如果您尝试运行包含 ES6 模块导入/导出语法的源文件，而不是从构建目录运行已编译文件，也会发生该错误。

确保仅从 build/dist 目录运行编译后的文件。

如果您在 TypeScript 项目中遇到错误，请在您的文件中将module选项设置为
。commonjstsconfig.json

tsconfig.json文件
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "esModuleInterop": true,
    // ... your other options
  }
}

如果您在 TypeScript 项目中遇到错误，请确保使用类似于
ts-node转译和运行.ts文件的包。

该错误通常是在您尝试使用node来运行 TypeScript 文件时引起的。

如果此建议在您的 TypeScript 项目中不起作用，请查看我的特定于 TypeScript 的文章 –
无法在 TypeScript 的模块外使用导入语句。

使用 ES6 导入/导出语法时的注意事项

使用 ES6import/export语法时，请确保：

  • 您要从中导入的文件的路径在您的导入语句中是正确的。
  • .js您在导入语句中指定了文件的扩展名（例如）。
  • 您没有拼错要导入的变量或函数的名称。标识符的名称在 JavaScript 中区分大小写。
  • 每个文件最多只能default导出 1 个。
  • 你没有混淆出口named和default进口。
索引.js
const num = 100;

// 👇️ default export
export default num;

// 👇️ default import
import num from './another-file.js'

// ----------------------------

// 👇️ named export
export const hello = 'world'

// 👇️ named import

import {hello} from './another-file.js'

如果您在 TypeScript 项目中遇到错误并且本文没有帮助，请查看我的 TypeScript 特定文章，了解如何解决错误：

如果你在使用JEST测试库时报错，请点击以下文章：

Want to learn more about importing and exporting values in JavaScript and TypeScript? Check out these resources: Import and export Classes and Functions in JavaScript,How to Import Values from Another file in TypeScript.

# Conclusion

The “SyntaxError: Cannot use import statement outside a module” occurs when we
use the ES6 Modules syntax in a script that was not loaded as a module.

To solve the error, set the type attribute to module when loading a
script, or in your package.json for Node.js apps.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: