Ошибка SyntaxError при использовании import в ApolloServer

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

Для корректного использования ES6 модулей и устранения ошибок с import следует добавить type="module" в HTML-тег script или "type": "module" в файл package.json, при работе с Node.js. В качестве альтернативы, можно использовать расширение .mjs для файлов Node.js.

<!-- В HTML -->
<script type="module" src="your-script.js"></script>

// В Node.js
{ "type": "module" }

Подведение итогов

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

Обновите вашу JS-среду выполнения

Node.js начиная с версии 13.2.0 поддерживает ES6 модули по умолчанию. При необходимости выполните обновление.

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

Расширения файлов играют важную роль

При использовании CommonJS и ES модулей используйте расширения .cjs и .mjs, чтобы Node.js корректно их обрабатывал.

Пользователи Babel, обновите настройки

Убедитесь, что ваша версия Babel – 7 или выше, и проверьте, что пресеты настроены правильно, чтобы избежать сбоев при работе с Babel.

Настройте TypeScript

Если вы разрабатываете на TypeScript, проверьте, что в файле tsconfig.json указаны корректные значения для параметров target и module.

Разбор расширений файлов .mjs и .cjs

Расширения файлов определяют методы обработки содержимого в Node.js:

• .mjs интерпретируется как ES модуль.
• .cjs соответствует синтаксису CommonJS.

Как выбирать расширение

• Используйте .mjs, при работе с ES модулями.
• .cjs подходит для старых кодовых баз или когда требуется сохранить гибкость CommonJS.

Дилемма: Import или Require

ES6 модули и "import"

• Для ES6 модулей используйте import, чтобы получить доступ ко всем возможностям JavaScript.

CommonJS модули и "require"

• При использовании CommonJS модулей в Node.js, предпочтительно использование метода require().

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

В данном примере показано, как объявление файла JavaScript как модуля позволяет применять import:

Если вы используете `import` без объявления модуля:

import { myFunction } from './module.js'; // SyntaxError: Инструкцию import нельзя использовать вне модуля. Это моя ошибка! 🤡

Объявите свой JavaScript файл как модуль:

<!-- Объявление скрипта как модуля в HTML-документе -->
<script type="module" src="script.js"></script>

Теперь вы получили все привилегии модуля:

import { myFunction } from './module.js'; // Ура! Мы в мире магии! 🎉💫

Переходы между системами модулей

Обновление до Babel 7

Перед переходом на Babel 7 подробно ознакомьтесь с новыми пресетами и зависимостями.

Динамические импорты

Используйте динамический import() для модулей CommonJS, загружаемых по требованию.

Работа в TypeScript

Правильная настройка параметров target и module в конфигурации TypeScript упростит работу.

Пополните ваши знания, используя лучшие ресурсы

• Подробная информация об ECMAScript Modules в документации Node.js
• Советы по установке Babel 7 в Babel Setup Guide
• Указания по настройке TypeScript в руководству по настройке tsconfig

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

1. import – JavaScript | MDN — Полное руководство по инструкции import.
2. Модули: ECMAScript modules | Документация Node.js v21.6.1 — Официальное описание работы ECMAScript модулей в Node.js.
3. ES Модули и Node.js – NodeSource — Обзор трудностей и решений при работе с ES модулями в Node.js.
4. Поддержка модулей ECMAScript в Node.js 12 — Мнение Акселя Раушмайера о поддержке ES модулей в Node.js.
5. Динамические импорты — Подробно о динамических импортах, важном механизме JavaScript.