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

[ClarissaAudrey]

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

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

[prazdevs]

Hi :)

The type error (persist does not exist) is due to your types being fetched from src only. The plugin is imported and installed in renderer/app.ts so the rest of the app (in src) never get to know about new options added to defineStore. You can add import {} from "pinia-plugin-persistedstate"; in your stores/user.ts and it will stop yelling at you.

As for the second error, since you are using Server Side Rendering, the error localStorage is not defined comes from the plugin calling localStorage in a server (node) environment. localStorage is a browser only API. you may want a different storage (cookies?) or to do the hydration only client side.

I have no idea how vite-plugin-ssr works, and their documentation isnt helping at all :/

[ClarissaAudrey]

Thank you very much for helping! Your suggestion works, i really appreciated the answer.

regarding the localStorage bit, i think your explanation makes a lot sense. I am gonna try and figure out how to configure this on vite-plugin-ssr.

Once again, thank you very much for your assistance!

[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?

[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 :/

[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.