web-dev-qa-db-ja.com

「Uncaught SyntaxError：Unexpected identifier」というES6モジュールのインポート

個人的なプロジェクトの場合、ES6インポートを使用してよりクリーンなコードを記述しようとしています。最初のテストとして、メニューを生成するオブジェクトを作成しています。クラス全体を直接ロードするとコード全体が機能しますが、ES6でインポートとエクスポートを使用すると、main.jsのimport行に「Uncaught SyntaxError：Unexpected identifier」エラーが発生します

次のファイルがあります。

assets/js/menu.module.js

'use strict';

export default class Menu
{ ... }

assets/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モジュールのchromeフラグの両方が有効になっています。これらがないと、importが定義されていないというエラーが表示されます。

Chromeのバージョンは62になるため、さまざまなソース（Googleの更新ログ自体を含む）に応じて、フラグがなくても機能するはずです。

なぜこれが機能していないのか、私が間違っていることについて誰でも私を啓発できますか？

javascriptecmascript-6es6-modules
50
ZeroThe2nd

@Bergiがコメントで言及したように、type="module"インポート行にmain.jsを追加すると問題が解決しました。すべてが現在機能しています。

応答して助けようとしたすべての人に感謝します。

46
ZeroThe2nd

私が見ることができるものから、あなたは実際にmenu.module.jsという名前が付けられている間にファイルmenu.jsをロードしようとしています。

PS：私が覚えていることから、インポートステートメントから.jsを削除することもできます。

3
Marcel Krause