概要
ほぼタイトルのままですが、
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コミットを残して、動く状態を残しておけば良かったと思いました