概要

ほぼタイトルのままですが、
Reactでとあるアプリケーションを開発していたのですが、何らかのタイミングで白紙ページのまま各画面が白紙ページのままとなってしまいました
そのエラーを解決した際の記録を残しておきます

環境

React 18.3.1
TypeScript 5.6.2
vite 6.0.5

現象

開発時のコードで、npm run dev でWebアプリケーションを起動
ブラウザでページを表示しようとしても、白紙ページのまま

ブラウザのコンソールにはエラー原因と思われるものは表示されていませんでした

原因

main.tsxの読込コードを誤って削除してしまっていた
main.tsxが読み込まれなければ、当然、root にレンダリングされる事が無いから白紙ページのままでした。
Appのコードがそもそも読み込まれていなければ、エラーそのものも出力されることも無いと言うオチでした。

修正前

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Control</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

修正後

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Control</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script> <!-- ←ここを間違えて削除してしまっていた -->
  </body>
</html>

まとめ

小まめにGitコミットを残して、動く状態を残しておけば良かったと思いました