はじめに
最小構成でwebアプリを作ろうと思い立ちgithub copilotを使いながら楽々作っていこうと思ったらつまづいたので備忘録として残しておきます。
開発環境
- Terminal Zsh
- VSCode Version: 1.85.1 (Universal)
- Google Chrome ver120.0.6099.129（Official Build） （arm64）
- npm v10.2.3
- node v20.10.0
- live-server
live-serverのインストール
live-serverはVSCodeの拡張機能でもありますが、ターミナルから実行したかったのでnpmでインストールしました。
zsh
npm install -g live-server
ディレクトリ構成
.
├── README.md
├── index.html
└── module
├── Hello.js
└── time.js
プログラム
以下のようなコーディングを行いました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import Hello from './module/Hello.js';
Hello();
</script>
</body>
</html>
module/Hello.js
import time from "./time.js";
const Hello = () =>{
console.log("Hello");
time();
}
export default Hello;
module/time.js
const time = () => {
const currentTime = new Date();
console.log(`現在の時間は ${currentTime.toLocaleTimeString()} です。`);
}
export default time;
エラー
ここでターミナルから以下のコードを実行し、live-serverを立ち上げました。
$ live-server index.html
立ち上がったindex.htmlから検証モードに入り、コンソールを確認すると以下のように表示されていました。
Chrome
Hello.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
訳)Hello.js:1 モジュール・スクリプトのロードに失敗しました： JavaScriptモジュール・スクリプトを期待しましたが、サーバーは "text/html "というMIMEタイプで応答しました。モジュール・スクリプトに対しては、HTML 仕様に従って厳格な MIME タイプ・チェックが実施されています。
同様の現象がnginxなどを利用すると起きることがあるようです。一般的にこのエラーがでる場合、パスの指定が間違っていることなど原因として考えられるようです。今回はパスの指定について間違いはなくハマってしまいました。
解決策
おとなしくVSCodeのlive-serverから実行すると上手くいきました。
拡張機能からlive-serverをインストールし、(※筆者の場合)右下にあるGo liveから実行すると期待通りの結果が得られました。
終わりに
筆者はnpmなどについてまだ知識が浅い部分があり、htmlのtype=moduleなどについても最近の慣例程度としか認知しておらず、まだ勉強中です。詳しい原因などについて理解のある方でしたらぜひコメント等でアドバイスをお願いします。