Firefox の最上位レベルでの ES2015 インポート宣言: エラーについて

Firefox で ES2015 インポート宣言を使用すると、エラーが発生する場合がありますモジュールのトップレベルでは許可されていないことを示します。 import ステートメントがファイルの先頭に配置されることが予想されるため、これは混乱を招く可能性があります。

問題の根本はブラウザのサポートにあります

エラー メッセージが示唆するように、インポート宣言はモジュール内での配置に特定の要件があります。 Firefox では、これらの宣言は、type="module" 属性を明示的に指定するスクリプト要素内に 含める必要があります 。これを正しく行う方法の例を次に示します。

「モジュール」を追加するscript 要素に属性を追加すると、スクリプトをモジュールとして解釈するようにブラウザに指示し、インポート宣言をロードして実行できるようになります。

ブラウザの互換性

インポートおよびエクスポート宣言は、次のブラウザ バージョン (以降) でサポートされています:

• Firefox 60
• Chrome (デスクトップ) 65
• Chrome (android) 66
• Safari 1.1

古いバージョンの場合は、ブラウザ内で実験的なフラグを有効にする必要がある場合があります:

• Chrome Canary 60: 実験的な Web プラットフォーム フラグ
• Firefox 54: about:config の dom.moduleScripts.enabled 設定
• Edge 15: about:flags