Исправляем ошибку: Import вне модуля в ECMAScript 6

Быстрый ответ

Чтобы оперативно устранить проблему, добавьте атрибут type="module" в тег <script> вашей HTML-страницы: <script type="module" src="your-script.js"></script>. В Node.js переименуйте файлы с расширением .mjs или добавьте строку "type": "module" в package.json.

<script type="module">
    import { myFunction } from './module.js';
    myFunction();
</script>

Настройка для Node.js в package.json:

{
  "type": "module"
}

Затем вы без проблем сможете использовать команду import в ваших JavaScript-файлах.

Выбор модульной системы: import или require

Вам необходимо определиться с модульной системой: использовать require для CommonJS или import для ES6-модулей. Их смешивание приведет к проблемам, поэтому выберите единственный подход.

Здесь приведен пример синтаксиса в стиле CommonJS:

const myFunction = require('./myModule');
myFunction();

Проверка правильности импорта и экспорта

Импорт и экспорт можно проводить так же, как прибытие и вылет в аэропорту. Убедитесь, что у вас все подготовлено для 'полета'. Проверьте синтаксис, описанный в документации применяемой библиотеки, или используйте готовую к работе версию из каталога dist.

Пример:

// Экспорт функции в ES6
export function myFunction() {}

// Импорт в другом файле
import { myFunction } from './myModule.js';

Пакетирование с помощью Mr. Bundler

Выбор между Rollup и Webpack аналогичен выбору помощника. Оба инструмента помогут обеспечить совместимость вашего кода с ES6 и не-ES6 средами, преобразуя весь ваш код в один файл, который будет работать в любой среде.

npx rollup main.js --file bundle.js --format iife

Область видимости ваших модулей

Помните, что переменные в модулях имеют свою область видимости. Если переменная не выводится, то она, возможно, находится вне вашей видимости.

Пример:

// Переменная доступна во всём модуле
export const myGlobalVar = 'Привет, мир!';

// В другом файле
import { myGlobalVar } from './myModule.js';
console.log(myGlobalVar); // Выведет 'Привет, мир!'

Если type="module" вам не подходит

Не беспокойтесь, если атрибут type="module" кажется вам сложным: можете использовать уже подготовленные сборки из каталога dist.

Как профессионально устранять ошибки

Если возникает ошибка, не ограничивайтесь временными решениями, исправьте корень проблемы, который может криться в некорректной записи, компиляции или настройках проекта. Иногда помочь может перезапуск после изменений.

Обновление конфигураций

Так же, как обновляются новости в социальных сетях, не забывайте обновлять и перезагружать приложение или конфигурации. Всегда отслеживайте произведенные изменения, тестируйте и внедряйте их,...

Экспериментирование — возвышение к решению

Иногда устранение проблем с import требует творческого подхода. Пробуйте различные методы: внедрение тегов script, подключение CDN или работы с локальными модулями, чтобы определить, что подойдёт вашему проекту лучше всего.

Визуализация

Попробуйте визуализировать постройку из Lego без правильного основания:

🏗️ Попытка постройки:
[🟥🟨🟩]

Использование import без указания type="module" приведет к ошибке:

import { myFunction } from './myModule.js'; // Ошибка синтаксиса!

Вот как выглядит корректная запись — с <script type="module"> создаём устойчивое основание:

<script type="module"> 
  import { myFunction } from './myModule.js'; 
</script>

Полученная структура будет выглядеть как куча компонентов, корректно собранных вместе, в стиле конструктора Lego.

🛠️ Успешное строительство: 🧱
[📦] <- Скрипт с "type=module"
[🟥🟨🟩]

Полезные материалы

1. JavaScript modules – JavaScript | MDN — подробная информация о модулях JavaScript от MDN Web Docs.
2. ES6 In Depth: Modules – Mozilla Hacks — детальный анализ истории и концепции модулей ES6.
3. Modules: ECMAScript modules | Node.js v21.6.1 Documentation — официальная документация Node.js по ECMAScript модулям.
4. Getting Started | webpack — краткое руководство по начальной настройке работы с Webpack.
5. Learn ES2015 · Babel — руководство Babel по использованию модулей ES2015.
6. ECMAScript modules in browsers – JakeArchibald.com — статья об использовании type="module" и модулей ES6 в браузерах.