Решение ошибки Unexpected Token Export в ES6: причины и способы

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

Ошибка Unexpected Token Export обычно возникает при использовании синтаксиса ES6 модулей в окружении, которое его не поддерживает. В таком случае нужно прибегнуть к синтаксису CommonJS:

// Экспорт в ES6
// export myFunction;

// Экспорт в CommonJS
module.exports.myFunction = myFunction;

На клиентской стороне стоит использовать тег <script type="module">. В Node.js переименование файлов с расширением .mjs или добавление "type": "module" в package.json позволит устранить проблему:

{
  "type": "module"
}

Работа в Node.js до версии v14.13.0

В версиях Node.js, предшествующих v14.13.0, модули ES6 не поддерживаются, однако существует два решения:

• Провести рефакторинг кода для работы с CommonJS:

  JS

  Скопировать код

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

  Запустить код

• Использовать транспилятор, например esbuild или Babel, для обеспечения поддержки ES6:

  JS

  Скопировать код

  require('esbuild').buildSync({ /* настройки транспиляции */ });

  Запустить код

TypeScript и ts-node: находка для разработчика

TypeScript обеспечивает полноценную поддержку синтаксиса ES6 в Node.js. Инструменты такие как ts-node или ts-node-dev, позволяют напрямую запускать файлы TypeScript:

ts-node myScript.ts

Ценность нативной поддержки по сравнению с транспиляцией

Хотя и транспиляторы, включая esbuild и Babel, несомненно полезны, но если ваша среда это допускает, использование нативной поддержки ES6 модулей в Node.js начиная с версии v14.13.0, может быть более предпочтительным вариантом.

Практика импорта и экспорта модулей

• Для экспорта классов или функций в ES6 используйте export или export default:

  JS

  Скопировать код

  export default class MyClass {}

  Запустить код

• Аналогично, для импортирования этих модулей в другой ES6-файл используйте:

  JS

  Скопировать код

  import MyClass from './myModule';

  Запустить код

• В CommonJS экспорт осуществляется через объект module.exports:

  JS

  Скопировать код

  module.exports = {
    myGreatFunction,
  };

  Запустить код

• И вот как выглядит импорт:

  JS

  Скопировать код

  const { myGreatFunction } = require('./myModule');

  Запустить код

Подробнее об этом расскажет наш спикер на видео

Ситуации столкновения при импорте и экспорте

Смешивание синтаксиса ES6 и CommonJS может вызвать ошибку ImportError/Export. Проверьте настройки вашего проекта внимательно.

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

Представьте ошибку Unexpected Token Export как препятствие на пути вашего кода:

// Ваш код движется по определенному пути...
🛣️ Шоссе Вашего Кода
  |
  |  // Идет транспортировка ваших модулей...
  |  import { myFunction } from './myModule';
🚧  export default myFunction;  // Внезапно, путь заблокирован!
  |
  |  // Движение прервано.

Вопросы совместимости в браузерах

В браузере в тегах script указывайте type="module":

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

Масштабирование стратегий использования модулей

Для успешной работы в разных средах:

• Применяйте динамический import() для условной загрузки модулей.
• Воспользуйтесь ленивой загрузкой для оптимизации производительности.
• Декомпозируйте ваш код на части и чанки с помощью webpack для эффективного бандлинга.

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

1. Модули JavaScript – JavaScript | MDN
2. Unexpected Token Export – Stack Overflow
3. Понимание module.exports и exports в Node.js — SitePoint
4. Модули | webpack
5. Настройка ESLint – ESLint – Расширяемый линтер JavaScript
6. Модули: CommonJS модули | Документация Node.js v21.6.1.