はじめに

Vite + Vu3 でサイネージ向けコンテンツを制作するにあたり、自分のPCでは問題なく動作していたのに、STB（Set Top Box）に配信したらエラーが出てしまったので、その原因と対処法を書いておきます。

環境

Windows11 Home
WebStorm 2023.1.1
Vite 4.3.9
Vue 3.2.47

症状

コンテンツとしては、商業施設に設置するサイネージ向けのもので、外部から店舗情報を読み込んで表示したり、動画が流れたりといった、商業施設ではよく目にするコンテンツです。
今までは、Vue CLI で構築してビルドしていたのですが、今回からは、Vite を使ってみようかなと思って、コンテンツを構築したところ、サイネージSTBに配信して確認したところ、以下のエラーメッセージが出ました。

error message

Failed to load module script: The server responded with a non-JavaScript MIME type of "". 
Strict MIME type checking is enforced for module scripts per HTML spec.

原因

上記のエラーメッセージの内容を調べるにあたり、Failed to load module script とあるので、モジュールの読み込みエラーなのかなと推測し、ビルドされた index.html を確認したところ、以下の記述を見つけました。

index

<script type="module" crossorigin src="./assets/javascripts/index-00000.js"></script>

現在すべてのブラウザでは、スクリプトでモジュールが使えるようですが、今回使っているSTBに組み込まれているブラウザはどうやら対応していないようだったので、このモジュールを使わないように出力してみます。
モジュールの対応状況は JavaScript modules via script tag を参照ください。

対処法

さて、Vite でモジュールを使わない方法で出力するには、@vitejs/plugin-legacy を追加します。
vite.config.jsを開き、追記していきます。

vite.config.js

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'     //<-- 追記
export default defineConfig({
  plugins: [
      vue(),
      legacy()     //<-- 追記
  ]
})

この設定を追記後出力された index.html を確認すると、
<script nomodule crossdomain...></script> という感じのコードが追加されました。
この出力で、STBからは無事に表示確認ができ、解決しました。

参考

ES Modules入門 JavaScriptでモジュールを使う時代
ES6 modules in local files - The server responded with a non-JavaScript MIME type
プラグインの使用 | Vite
ビルドオプション | Vite