Next.jsで開発中のヘッドレスCMSをnpm run buidした際に下記エラーが発生。
Loading code...自分が書いたコードを確認したものの原因の特定ができずにいたのですが、最終的にはライブラリが原因でした。
目次
環境
- React
19.0.0 - Next.js
15.1.5
ReferenceError: window is not definedの原因
サーバー側（SSRやSSGの際）で window オブジェクトを参照していることが問題
ReferenceError: window is not definedの対処法
対象ファイルを探す
windowを使っているファイルを探す。プロジェクトディレクトリにて下記コマンドを実行（macの場合）
Loading code...コードを修正する（あるあるver）
通常は下記で対応する
useEffect内でwindowを使うtypeof window !== "undefined"をチェック
それぞれコードサンプルを下記に記載
Loading code...Loading code...コードを修正する（今回ver）
めちゃくちゃ探したけど怪しい箇所が見つからず、最終的に利用しているライブラリが原因だったことが判明しました・・・！
react-datepicker など、一部のライブラリは window に依存している場合があるらしい。
対処法としては、next/dynamic を使ってクライアントサイドのみでロードすればok◎
Loading code...ちなみに今回は、スクロールアニメーション実装のために利用していたwow.jsが原因でした。
ひとこと
自分が書いたコードのどこかに原因があるはず・・・！と血眼で探しましたが見つからないわけです🥺
ライブラリが原因だったとは、考えてみればわかりそうなものですがたどり着くまでに時間がかかってしまいました。
