Ошибка Cannot use import statement outside a module в JS

Ошибка “SyntaxError: Cannot use import statement outside a module” возникает, когда интерпретатор JavaScript встречает оператор import вне модуля.

В JavaScript модуль – это код, выполняемый в своей собственной области видимости, отдельной от глобальной области видимости. Операторы импорта могут использоваться только внутри модуля, но не в глобальной области видимости.

Эта ошибка может возникнуть в любой среде JavaScript, в том числе и в Node.js. Однако более вероятно ее появление в средах, которые не поддерживают использование операторов импорта в глобальной области видимости, например, в старых JavaScript-движках или браузерах.

Исправление для HTML

Чтобы устранить проблему для HTML-скриптов, необходимо установить атрибут type элемента <script>, чтобы указать тип скрипта, включенного в элемент.

Если атрибут type имеет значение “module”, браузер будет знать, что сценарий является модулем JavaScript, и будет выполнять его как таковой.

Это позволит вам использовать операторы импорта внутри сценария.

Вот пример:

<!-- when loading raw JS -->

<script type="module"></script>

<!-- when loading external files -->

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

В качестве альтернативы вы можете использовать такой инструмент, как Babel, для транспонирования вашего кода, который преобразует утверждения импорта в более старый синтаксис, который можно использовать в глобальной области видимости. Затем вы можете включить транспонированный код в свой HTML-документ.

Исправление для Node.js

Чтобы использовать импорт модулей ES6 в Node.js, вы можете установить поле type в файле package.json вашего проекта, чтобы указать, что ваш проект использует модули ES6.

Вот пример:

{
  "name": "my-project",
  "type": "module",
  ...
}

После добавления поля type в файл package.json вы можете использовать оператор import в JavaScript-файлах вашего проекта без необходимости использования специальных флагов.

import myModule from './my-module';

// keep in mind that for local files, you have to append the .js extension to the module, like so:

import myModule from './my-module.js';

// if not you'll get the error: "[ERR_MODULE_NOT_FOUND]: Cannot find module".

Этот подход имеет несколько преимуществ. Во-первых, он не требует использования специальных флагов при запуске интерпретатора Node.js, что делает его более удобным. Во-вторых, он позволяет другим инструментам, таким как бандлеры и линтеры, распознать, что в вашем проекте используются модули ES6, что упрощает использование этих инструментов в вашем проекте.

Исправление для TypeScript

Чтобы использовать систему модулей CommonJS в проекте TypeScript, вам нужно включить опции компилятора allowSyntheticDefaultImports и esModuleInterop в конфиге TypeScript.

Эти опции позволяют TypeScript рассматривать импортируемые значения так, как будто они имеют экспорт по умолчанию, даже если они его не имеют, и использовать синтаксис импорта с модулями CommonJS.

tsconfig.json:
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    ...
  }
}

Эти параметры поддерживаются только в TypeScript 3.8 и более поздних версиях.

Другая возможность заключается в том, что вы пытаетесь запустить свои файлы TypeScript с помощью команды node, а не с помощью такого инструмента, как ts-node, для транспонирования и запуска.

В этом случае вы можете использовать ts-node для транспонирования и запуска ваших файлов, чтобы исправить ошибку.

Если у вас появились вопросы про то, как устранить ошибку “SyntaxError: Cannot use import statement outside a module”, мы будем рады ответить вам в комментариях ниже.