Импорт модуля 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"> линия или нет, казалось, не имеет никакого значения для меня. У меня есть и флаги chrome для экспериментальных, и для модулей ES6, так как без них я получил сообщение об ошибке import не определяется

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

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

Источник

2 ответа

Решение

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

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

Источник

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

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

Источник

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

 - npm i -D parcel@next
 - parcel index.html
Источник
Другие вопросы по тегам