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

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

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

активы / js / меню.модуль.js

'use strict';

export default class Menu
{ ... }

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

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

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

.HTML-код

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

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

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

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

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

2 ответов


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

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


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

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