経緯
yuki-P さん が公開されている「配信パートナーAIシステム」をローカルで導入した際、admin.js が読み込まれず、管理画面のUIの一部が正しく表示されないという問題に遭遇しました。
実際にはこれは yuki-P さんのソフトウェアの問題ではなく、自分のWindows環境の設定が原因 でした。かなり限定的なケースとは思いますが、同じようなハマり方をする人がいるかもしれないので、備忘録として残しておきます。
症状
起動後、ブラウザの開発者ツール(F12)の Console に以下のようなエラーが表示されていました。
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
また、本来表示される左側のメニューUIなどが表示されていませんでした。(管理画面スクショ)
一方で、同じソフトウェアを別のWindowsマシンや同じマシンの新規作成した別ユーザーアカウントで試したところ、問題なく表示されました。
このことから、特定のユーザー環境に起因する問題であることがわかりました。
原因
調査の結果、原因は レジストリの設定 でした。
Windowsの以下のキーにある .js ファイルの MIME タイプが text/plain になっていたことが原因です。
HKEY_CURRENT_USER\Software\Classes\.js
ここで Content Type の値が text/plain になっていると、Flask などの HTTP サーバー がその MIME タイプで .js を返してしまい、ブラウザはモジュールとして読み込めなくなってしまいます。
解決方法
レジストリを修正する
-
Win + Rを押して「regedit」を起動 -
HKEY_CURRENT_USER\Software\Classes\.jsを開く -
Content Typeの値をapplication/javascriptに変更
⚠️ レジストリの編集は慎重に。必ず自己責任で行ってください。
なぜこうなった？
明確な原因はわかっていませんが、おそらく過去に何かのエディタやツールを使った際、あるいは自分の操作によって、.js ファイルに対して誤った MIME タイプの設定がされてしまったと思われます。
また、今回問題となったレジストリの設定はユーザーごとに異なる部分であったため、別のユーザーアカウントでは正常に動作したものと考えられます。
まとめ
-
admin.jsが読み込まれず UI が崩れる原因は、ソフトウェアの不具合ではなく、Windows のレジストリ設定にありました。 - このレジストリ設定は ユーザーごとに異なる ため、他のマシンや別ユーザーアカウントでは問題が発生しませんでした。
- 対処法として、
HKEY_CURRENT_USER\Software\Classes\.jsのContent Typeをapplication/javascriptに変更すれば解決できます。
「JavaScript が読み込まれない」「UI が崩れる」などの問題が起きた場合は、ブラウザの開発者ツールのエラーと レジストリの設定も確認してみると良いかもしれません。
本記事が、同じようなハマり方をした方の一助になれば幸いです。