Nuxt.jsで[nuxt] [request error] [unhandled] [500] localStorage is not defined
今回はNuxt.jsを使っているときに下記のようなエラーが起きたときの原因と対処法についてご紹介していこうと思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
ERROR [nuxt] [request error] [unhandled] [500] localStorage is not defined at ./stores/test.js:29:18 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:399:5) at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:381:5) at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:206:14) at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:259:12) at async ./app.vue:5:31 at async ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:399:5) at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:381:5) at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:206:14) |
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が使えます。
|
1 2 3 4 |
export default defineNuxtConfig({ // ssr: true // SSRモード ssr: false // SPAモード }) |
ひとまず、localStorageはSSRでは使えないということを覚えておきましょう。
終わりに
今回はNuxt.jsを使っているときに表題のようなエラーが起きたときの原因と対処法についてご紹介いたしました。