1. ホーム
  2. javascript

[解決済み] Firefox で ES2015 のインポートが機能しない(トップレベルでも)。

2022-05-16 15:13:44

質問

私のサンプルファイルです。

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.jsです。

import Test from 't2.js';

t2.jsです。

export const Test = console.log("Hello world");

Firefox 46 でページをロードすると、 "SyntaxError: import declarations may only appear at top level of a module" - が返されます。このエラーは赤信号で、import/export はまだサポートされていないだけなのでしょうか?

どのように解決するのですか?

実は、あなたが受けたエラーは、モジュールを読み込んでいることを明示的に示す必要があるためです。

<script src="t1.js" type="module"></script>

で見つけた ブラウザでのES6インポートの使用に関するこの文書 . 推奨される読み方です。

これらのブラウザのバージョン (およびそれ以降) で完全にサポートされています。 caniuse.com ):

  • Firefox 60
  • Chrome (デスクトップ) 65
  • クローム (アンドロイド) 66
  • サファリ 1.1

古いブラウザの場合、ブラウザのいくつかのフラグを有効にする必要があるかもしれません。

  • Chrome Canary 60 - 実験的な Web プラットフォームのフラグの後ろにある chrome:flags .
  • Firefox 54 dom.moduleScripts.enabled での設定 about:config .
  • Edge 15 - 実験的な JavaScript 機能の設定の背後にある about:flags .