SyntaxError: объявления импорта могут находиться только на верхнем уровне модуля

Исключение JavaScript "import declarations may only appear at top level of a module" возникает, когда объявление импорта находится не на верхнем уровне модуля. Это может произойти из-за того, что объявление импорта вложено в другие конструкции (функции, блоки и т. д.) или, что более часто, потому что текущий файл не рассматривается как модуль.

Сообщение

SyntaxError: Cannot use import statement outside a module (V8-based)
SyntaxError: import declarations may only appear at top level of a module (Firefox)
SyntaxError: Unexpected identifier 'x'. import call expects one or two arguments. (Safari)

Тип ошибки

SyntaxError

Что пошло не так?

У вас может быть объявление import, вложенное в другую конструкцию, например, функцию или блок. Объявление import должно находиться на верхнем уровне модуля. Если вы хотите импортировать модуль условно или лениво по требованию, используйте вместо этого динамический импорт.

Если import уже находится на верхнем уровне кода, это может быть связано с тем, что файл не интерпретируется как модуль. Среды выполнения требуют внешних подсказок для определения того, является ли файл модулем или нет, и вот несколько способов предоставить такие подсказки:

• Если файл загружается непосредственно из HTML, убедитесь, что тег <script> имеет атрибут type="module".
• Если файл запускается в Node, убедитесь, что либо файл имеет расширение .mjs, либо ближайший файл package.json имеет поле "type": "module".
• Если файл запускается как рабочий, убедитесь, что вы вызываете конструктор Worker() с опцией type: "module".
• Импортируйте этот файл из другого модуля.

Еще одна причина может быть, когда вы пишете import с помощью компилятора (например, TypeScript) и случайно запустили исходный файл. Поскольку объявления import обычно появляются в самом начале программы, они являются первым, что видит парсер, и на что он жалуется. Убедитесь, что вы скомпилировали исходный файл и запустили скомпилированный файл вместо него.

Примеры

Условные импорты

Вы не можете использовать import внутри других конструкций, как это можно делать в Python.

if (writeOutput) {
  import fs from "fs"; // SyntaxError
}

Либо переместите import на верхний уровень, либо используйте динамический импорт.

if (writeOutput) {
  import("fs").then((fs) => {
    // use fs
  });
}

Импорт в скрипте, не являющемся модулем

Если вы загружаете скрипт из HTML, убедитесь, что вы добавили атрибут type="module" к тегу <script>.

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

Если по какой-то причине вы не можете перевести скрипт в модуль, вы можете использовать динамический импорт.

async function main() {
  const myModule = await import("./my-module.js");
  // use myModule
}

main();

Смотрите также

• Использование модулей
• import
• import()