はじめに
Udemyで「【AIチャットアプリ開発】Next.js & Firebase & ChatGPT APIを使ったWebアプリ開発講座」の講座を受け、最後Firebaseにデプロイするとことで、
デプロイはできたが、開発環境ではでなかったエラーが出て対応に時間がかかったので備忘として残します。
結論から先にいうと、build時にwarningが出ていてそのwarinigを直してデプロイしなおしたらうまくいきました
問題
（解決までの流れをつらつら書きます。）
コンソールにこんなエラーが出た
４つほど出て１つづつ調べた。
１つめのエラー
Uncaught SyntaxError: Identifier 'Audio' has already been declared
「Audio」なんて変数使ってないぞと。
https://qiita.com/TRyota/items/d5a7a39da551612dbfd9
Scriptを二度呼ぶとそのようなエラーが起きると記述がある。
しかしそのような記述自分のコードでは見当たらない。
2つ目のエラー
Uncaught Error: Minified React error #423;
visit https://reactjs.org/docs/error-decoder.html?invariant=423
for the full message or use the non-minified dev environment
for full errors and additional helpful warnings.
キャッチされないエラー: 縮小された React エラー #423;
完全なメッセージについては https://reactjs.org/docs/error-decoder.html?invariant=423
にアクセスしてください。
完全なエラーと追加の役立つ警告については、縮小されていない開発環境を使用してください。
リンクのドキュメントを見に行って本当のエラーをみる
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
水分補給中にエラーが発生しました。エラーはサスペンス境界の外側で発生したため、ルート全体がクライアント レンダリングに切り替わります。
何を言ってるんだ？水分補給？水必要なの？笑
エラー内容でググったら HTMLタグの忘れでエラーになるという記事を発見
で、ちょっと違うかなと思ったものの、page.tsx、Layout.tsxを調べたがちゃんと<HTML><body>タグの記載がある
App Routerの落とし穴 HTMLタグ忘れる編 [Next.js]
Udemyの完成形のソースコードと比較しても差が見当たらない。
とほほ
解決方法
ここまで調べても見つからないのかとあきらめて
build時のログを眺めていたら、warningが出ていたことを発見。
warningなので気にしていなかったが、この警告を修正し、useEffectの依存配列を修正したら、うまくデプロイでき、エラーも消えた。
./src/app/components/Sidebar.tsx
61:6 Warning: React Hook useEffect has a missing dependency: 'user'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
./src/context/AppContext.tsx
68:6 Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
おわりに
build時の警告は気にしないとだめ。
参考