Nuxt.jsで[nuxt] [request error] [unhandled] [500] localStorage is not defined

今回はNuxt.jsを使っているときに下記のようなエラーが起きたときの原因と対処法についてご紹介していこうと思います。

Nuxt.jsのバージョンは3.11.2です。



Nuxt.jsで[nuxt] [request error] [unhandled] [500] localStorage is not defined

結論から言うと表題のこのエラーはサーバーサイドレンダリング(SSR)環境ではlocalStorageが使えないため起こります。

SPAなら問題なく動きますが、SSR環境ではlocalStorageが使えないためこのエラーが起こるそうです。

process.clientを使って今動いている状態がSPAかSSRかどうかによって条件分岐で処理を変えることもできますが、nuxt.config.tsでssr: falseとすればSPAで実行することになり、localStorageが使えます。

ひとまず、localStorageはSSRでは使えないということを覚えておきましょう。

終わりに

今回はNuxt.jsを使っているときに表題のようなエラーが起きたときの原因と対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

ITパスポート、基本情報技術者、応用情報技術者などIPAが提供する国家資格の過去問を学べるモバイルアプリをリリースしました。
詳しくは下記のプレスリリースをご覧ください。
https://prtimes.jp/main/html/rd/p/000000008.000073303.html

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Nuxt.js

Posted by ちこ