Модуль ES6 Импорт, предоставляющий сообщение "Uncaught SyntaxError: Неожиданный идентификатор"

Для личного проекта я пытаюсь использовать импорт ES6 для написания более чистого кода. В качестве первого теста я пишу объект, который должен генерировать меню. Весь код работает, когда я непосредственно загружаю класс, но при использовании импорта и экспорта в ES6 он дает сообщение об ошибке "Uncaught SyntaxError: Неожиданный идентификатор" в строке import в main.js

У меня есть следующие файлы:

активы/JS/menu.module.js

'use strict';

export default class Menu
{ ... }

активы/JS/main.js

import Menu from "./menu.module.js";

window.addEventListener('DOMContentLoaded', () => {
    const menu = new Menu();
});

index.html

<script type="module" src="assets/js/menu.module.js"></script>
<script src="assets/js/main.js">

Обратите внимание, что это только соответствующие строки кода.

Использование строки <script type="module"> не показало для меня никакой разницы. У меня есть как хром-флаги для экспериментальных, так и модулей ES6, так как без них я получил ошибку об import не определяется.

Версия Chrome - 62, поэтому в соответствии с различными источниками (включая сам журнал обновлений Google) это должно работать, даже без флагов.

Может ли кто-нибудь просветить меня, почему это не работает, и что я делаю неправильно?

Ответы

Ответ 1

Как отметил в комментарии @Bergi, добавление type="module" в main.js импорта main.js решило проблему. Сейчас все работает.

Спасибо всем, кто ответил и попытался помочь.

Ответ 2

Из того, что я вижу, вы пытаетесь загрузить файл menu.module.js пока он фактически назван menu.js

PS: Из того, что я помню, вы также можете удалить .js из инструкции import.