← 一覧へ
コードの書き間違い出る場所:ターミナル(黒い画面)よく出る

window や localStorage がない

ReferenceError: window is not defined
ReferenceError: localStorage is not defined

ひとことで言うと

「ブラウザにしかないもの(window・document・localStorage)を、サーバーの上で使おうとしました」という意味です。Next.js などでよく出ます。

よくある原因

  1. コンポーネントの一番上で、すぐ localStorage を読んでいる
  2. ブラウザ専用の部品(地図・グラフなど)を、サーバーでも読み込んでいる

自分で確かめること

たいていは、こうすると直ります

localStorage などは useEffect の中で使うか、typeof window !== "undefined" で確かめてから使います。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

【エラー】
ReferenceError: window is not defined
ReferenceError: localStorage is not defined

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「window や localStorage がない」というもので、よくある原因は次のとおりです。
・コンポーネントの一番上で、すぐ localStorage を読んでいる
・ブラウザ専用の部品(地図・グラフなど)を、サーバーでも読み込んでいる

どれに当てはまるかを確かめる方法も教えてください。