firebaseを使っています。
Reactで作成したアプリをデプロイしたところ、
成功したものの画面が真っ白に
エラー内容
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec
原因
JSX ファイルを直接読み込んでいる
発生時の状況
firebaseでHostingを設定時、
ディレクトリを聞かれたのだけどよく分からず...
? What do you want to use as your public directory? (public)
参考記事もchatGPTも「build」だよ、と教えてくたので設定するも新規でindex.htmlが作成され、画面の表示もデフォルトのよう
表示が期待通りではないので、
今までローカルで確認していたルートディレクトリのindex.htmlをデプロイ対象にするため
firebase.jsonのpublicディレクトリを変更したら画面が真っ白になったのでした
解決のヒント
まずJSXを読み込んでいるのが原因で、
npm run build で JSXをJavaScriptファイルに直して作成してくれるそう
そこで生成されたフォルダをデプロイすればエラーは解決しそう
私の場合は dist フォルダにjsファイルが作成されていることが確認できました
結論
Vite でビルドしたらディレクトリ先は dist にする
firebase.json
{
"hosting": {
"public": "dist"
}
}
上記でエラーは解決して、期待した通りの表示が確認できました！
そもそもなぜ dist フォルダだったのか
以下はchatGPTから流用
ーーーーーーー
もし create-react-app 以外のカスタムビルドツール（例えば Parcel や Vite）を使用している場合、ツールの設定によって dist フォルダが使われている場合があります。
ーーーーーーー
ということでした。
ちなみに私はViteで作成しました。