[vite-ssr] How can I fix localStorage is not defined

Describe the bug

Hi! so i am having several issues regarding implementing the pinia-persisted-state.

Environment: vue3.2.39+pinia2.0.22+pinia-plugin-persistedstate2.2.0+vite3.0.9+vite-plugin-ssr0.4.38

code

import { reactive } from "vue";
import { defineStore } from "pinia";

const user = reactive({
  authKey: "",
});

export const useUserStore = defineStore({
  id: "user",
  state: () => user,
  actions: {
    setAuthKey(newAuthKey: string) {
      this.authKey = newAuthKey;
      // console.log("haha");
    },
  },
  persist: true,
});

first issue:

I can’t really seem to import persist:true, this is the issue that i’m having

  Object literal may only specify known properties, and 'persist' does not exist in type 'DefineStoreOptions<"user", { authKey: string; }, {}, { setAuthKey(newAuthKey: string): void; }>'

second issue: Upon compiling the app, this is the error that occurs:

ReferenceError: localStorage is not defined
    at /Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia-plugin-persistedstate/dist/index.js:160:19
    at Array.map (<anonymous>)
    at /Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia-plugin-persistedstate/dist/index.js:158:155
    at /Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia/dist/pinia.cjs:1644:43
    at EffectScope.run (/Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/@vue/reactivity/dist/reactivity.cjs.js:37:24)
    at /Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia/dist/pinia.cjs:1644:33
    at Array.forEach (<anonymous>)
    at createSetupStore (/Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia/dist/pinia.cjs:1631:14)
    at createOptionsStore (/Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia/dist/pinia.cjs:1222:13)
    at Module.useStore (/Users/clarissaaudrey/Documents/GitHub/dashboard-2.0.0/node_modules/pinia/dist/pinia.cjs:1708:17)

can you help me fix this issue?

Thanks beforehand!

Reproduction

https://github.com/ClarissaAudrey/pinia-persisted-issue

System Info

npm install
npm run dev

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible of the bug.

[ClarissaAudrey]

Hi @hamedg68 , I have came up with a solution, not sure if it is applicable to you, so what i did is i render the localStorage only on the client side. Or you can try the cookie option that @prazdevs suggested.

[prazdevs]

@ClarissaAudrey No problem hopefully that solves most of your problems or gives you hints to solve them. Feel free to close the issue if you’re fine with the answer 👍

@hamedg68

I have the same problem with vite-plugin-ssr @ClarissaAudrey, can you find a way to use pinia-plugin-persistedstate with ite-plugin-ssr to store data in localstorage which is fetched in serverside?

localStorage is a client API, it can never be used/accessed server side. I recommend you use some other things such as cookies. But I have no clue how vite-plugin-ssr works, and the docs are really putting me off it 😕