Firebase hostingでデプロイ時に画面が真っ白になった/Expected a JavaScript module script but the server responded with a MIME type of "text/jsx".

はじめに

Firebase hostingで学習用アプリをデプロイしてます
gitHub acrionsを利用してCI/CDを行っているのですが
deployが失敗したので以下の記事を参考に解消しました
https://qiita.com/AK_React/items/05957ddc311d3bc14c28
しかし、私の環境だと、デプロイ自体は完了できても、画面が真っ白になってしまったのでまとめます

問題

deployは成功しているの、画面が真っ白
consoleを見ると

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.Understand this error

とのこと
どうやら本来jsxファイルをjsに変換してデプロイしなければいけないところを、jsxのままデプロイしてしまったいる模様
検証ツールのネットワークタブでgetしてるファイルを見ると・・・「main.jsx」君、君が犯人だね

上にリンクを貼っている記事での対応のように、デプロイする対象を変更したため、余計なファイルまでデプロイしてしまっていそう
やはり、デプロイする対象はbuildで生成されたdistファイルを対象にした方がよさそう

解決方法

そもそも、github actionsでbuildしたはずのdistファイルが無いと怒られてたかといえば
buildのjobとdeployのjobが違うために、このjob間で生成物の共有がなされていないためでした
共有するためのやつ、ありました
https://docs.github.com/ja/actions/writing-workflows/choosing-what-your-workflow-does/storing-workflow-data-as-artifacts
上記を参考に
buildのjobで生成されたdistファイルをアップロード
そしてそのアップロードされたファイルをdeployのjobでダウンロード
これでbuildされたdistファイルをデプロイできます

jobs:
  build:
    steps:
    （略）
    - name: Upload dist
      uses: actions/upload-artifact@v3
      with:
        name: dist
        path: dist

  deploy:
    steps:
    （略）
    - name: Download all artifact
      uses: actions/download-artifact@v3
      # ダウンロード対象を指定しない場合、すべてダウンロードする

ちなみに、buildからdeployを同じjobで書けばこの工程を省いてもいけるみたいです

おわりに

github actionsのエラーで困っている時に、エラー記事通りにしてエラー解消したので
肝心のデプロイ後のページ確認を怠っており、後から気づきました
最終的なページがうまく表示できているか、絶対忘れてはいけないポイントですね