はじめに

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時の警告は気にしないとだめ。

参考