#49 JavaScriptの学習 インポートエラー

「Uncaught SyntaxError SyntaxError: Cannot use import statement outside a module」というエラーが出ました。インポートしてコンソールテストしている最中に。解決しましょう。

使用しているファイルは３つです。
インポート元の「import2.js」
コンソールテストを行う、インポート先の「import1.js」
コンソールテスト用の「console-test.html」

import2.js



class Words {
    japan() {
        console.log('こんにちは日本');
    }
}
export default Words

このファイルの「Words」クラスをエクスポートします。

import1.js



import Words from "./import2.js";

const greet = new Words;
greet.japan();

「Words」クラスをインポートして、「greet」に代入したインスタンスを作成しました。そして、「japan()」を呼び出せば’こんにちは日本’とコンソールされると思っていました。

console-test.html



<!DOCTYPE html>
<html lang="ja">
<head>
    <title>test</title>
</head>
<body>
    <script src="./import1.js">
    </script>
    <p>コンソール出力テスト</p>
</body>
</html>

結果は
Uncaught SyntaxError SyntaxError: Cannot use import statement outside a module

調べてみると簡単に解決しました。ホントに簡単です。「console-test.html」ファイルの<script>の属性に type=”module”を加えれば良いのです。

console-test.html



<!DOCTYPE html>
<html lang="ja">
<head>
    <title>test</title>
</head>
<body>
    <script src="./import1.js" type="module">
    </script>
    <p>コンソール出力テスト</p>
</body>
</html>