Объявления импорта ES2015 на верхнем уровне в Firefox: понимание ошибки

При использовании объявлений импорта ES2015 в Firefox вы можете столкнуться с ошибкой что они не разрешены на верхнем уровне модуля. Это может сбить с толку, поскольку вы ожидаете, что операторы импорта будут размещены в верхней части файла.

Корень проблемы заключается в поддержке браузера

Поскольку Сообщение об ошибке предполагает, что к декларациям импорта предъявляются особые требования к их размещению в модуле. В Firefox эти объявления должны быть включены в элемент сценария, который явно указывает атрибут type="module". Вот пример того, как это правильно сделать:

Добавив "модуль" атрибут элемента скрипта, вы даете браузеру указание интерпретировать скрипт как модуль, позволяя ему загружать и выполнять объявления импорта.

Совместимость браузера

Импорт и декларации экспорта поддерживаются в следующих версиях браузера (и более поздних):

• Firefox 60
• Chrome (рабочий стол) 65
• Chrome (android) 66
• Safari 1.1

Для более старых версий может потребоваться включить экспериментальные флаги в браузере:

• Chrome Canary 60: флаг экспериментальной веб-платформы
• Firefox 54: настройка dom.moduleScripts.enabled в about:config
• Edge 15: настройка экспериментальных функций JavaScript в about:flags