Что означает ошибка SyntaxError: Unexpected token '{'. import call expects exactly one argument

Что означает ошибка SyntaxError: Unexpected token '{'. import call expects exactly one argument

Рабочая ситуация: импортируем в основной игровой скрипт переменную со словарём (для проекта Wordle на JavaScript). Подключаем к странице основной скрипт <script src="script.js"></script> и дальше делаем всё по правилам импорта и экспорта:

  • в файле words.js, откуда будем экспортировать значение переменной, пишем команду export const WORDS = [] — она означает, что теперь мы можем использовать её содержимое в другом скрипте;
  • в файле script.js, куда будем импортировать эту переменную, пишем так: import { WORDS } from "./words.js"; — так скрипт поймёт, что и откуда нам нужно взять. 

Кажется, что всё верно, но при исполнении кода в браузере получаем ошибку:

❌ SyntaxError: Unexpected token '{'. import call expects exactly one argument.

Что это значит: браузер по какой-то причине ругается на фигурную скобку — ему кажется, что вместо неё должно стоять что-то другое.

Что делать с ошибкой SyntaxError: Unexpected token '{'. import call expects exactly one argument

На самом деле мы не в каждом файле сделали всё, что нужно: у нас же ещё есть файл index.html, где мы подключаем наш основной скрипт. Раз мы эту страницу откроем в браузере, то произойдёт такое:

  1. Браузер будет обрабатывать файл index.html, строчку за строчкой.
  2. Как только он встретит команду <script src="script.js"></script>, то загрузит скрипт себе в память и тоже будет выполнять его в браузере.

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

Встретив этот параметр, браузер поймёт, что вы хотите использовать модули и подключать один к другому во время работы, и не будет выдавать ошибку. 

Решение: в случае ошибки SyntaxError: Unexpected token '{'. import call expects exactly one argument достаточно добавить при подключении скрипта параметр type="module":

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

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Подсвечиваем манипуляции и пропаганду на любом сайте
Подсвечиваем манипуляции и пропаганду на любом сайте

Береги свой ум.

easy
$ is not defined в jQuery: что это значит и что делать
medium
Моделируем игру в рулетку на Python
Моделируем игру в рулетку на Python

И строим наглядные графики.

easy
Устанавливаем суверенный облачный офис

Пошаговая установка OnlyOffice на ваш собственный или арендованный сервер

hard
Делаем из сайта приложение для Android на конструкторе
Делаем из сайта приложение для Android на конструкторе

Просто, бесплатно, но с рекламой

medium
Как сделать таймер
Создаём собственный таймер-напоминалку

Таймеров и трекеров полно, но мы сделаем такой, какой нужен именно вам. Это легко.

medium
Правильные цитаты: добавляем первоисточник в ворованный с вашего сайта контент
Правильные цитаты: добавляем первоисточник в ворованный с вашего сайта контент

При вставке все будут видеть, откуда скопирован текст

medium
Что означает ошибка IndentationError: expected an indented block
Что означает ошибка IndentationError: expected an indented block

Самая популярная ошибка у начинающих программистов на Python.

easy
Конец ретроградному Меркурию! Пишем собственный гороскоп на Python

Наш гороскоп точен и прост! Сбросим иго астрологов!

medium
Бигдата и тепловые карты на примере твитов Байдена и Трампа
Бигдата и тепловые карты на примере твитов Байдена и Трампа

Сразу видно, кто постит сам, а за кого это делает команда

medium
easy