Github Actionでpushすると画面が真っ白に...

初めに

今回Reactを用いてプロジェクトを作成しています。
今までも何回かReactプロジェクトをGithub Actionでデプロイしてきました。
ですが今回のエラーによる、画面真っ白現象は初めてだったので共有します。

問題点

Github Actionsでデプロイした時に画面が真っ白になりました。
まず初めに確認したことは、Github secretにsupabase URLが渡っていること。
ですがこれは問題なさそうでした。

原因はApp.tsxに書かれている以下の部分です。

function App() {
  console.log('App component rendered');
  return (
    <>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/register" element={<Register />} />
        <Route path="/cards">
          <Route index element={<Cards />}/>
          <Route path=":userId" element={<Users />} />
        </Route>
      </Routes>
    </>
  )
}

解決策

今回の原因はルートのパス"/"が記述されていないことでした。
firebase ホスティングで最初に表示するページは"/"のページです。
その記述がなかったため、表示するページがなく画面が真っ白になりました。

修正したコードは以下の通りです。

function App() {
  console.log('App component rendered');
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/register" element={<Register />} />
        <Route path="/cards">
          <Route index element={<Cards />}/>
          <Route path=":userId" element={<Users />} />
        </Route>
      </Routes>
    </>
  )
}

まとめ

Routerについて復習しながらの記述していたため、全く気づいていませんでした。
画面真っ白になる原因としては、APIkコードがGithub secretに登録されていないことが多いです。
ですが今回はあまり見たことのない凡ミスであったため、逆になかなか気づかないエラーでした。