Vite SSR crashes with localStorage

[omridevk]

when I am adding this to my code:

const storage = createJSONStorage<WizardAtom>(() => localStorage)

I am getting the following error:
15:52:21 [vite] Error when evaluating SSR module /src/atoms/wizard-data-atom.ts:
|- ReferenceError: localStorage is not defined
at eval (/src/atoms/wizard-data-atom.ts:7:63)
at Object.getItem (/node_modules/jotai/esm/vanilla/utils.mjs:372:31)
at Module.atomWithStorage (/node_modules/jotai/esm/vanilla/utils.mjs:419:25)
at eval (/src/atoms/wizard-data-atom.ts:8:46)
at async instantiateModule (/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53451:5)

I will try to provide a reproduction soon, since this happens in a private repo.

[omridevk]

@dai-shi
https://stackblitz.com/edit/vitejs-vite-kyvbfj?file=package.json
here's a reproduction.
I noticed this only happens when

const a = createJSONStorage(() => localStorage)
const b = atomWithStorage('data', {}, a, {getOnInit: true})

if I remove the getOnInit it works, when it is set to true I get the error.

[omridevk]

Yeah i figured as much, but why would it work with localStorage? I didn't look at the source code yet, but the on init behavior is functioning but when i give it a different storage it tries to initiate it on the server

[omridevk]

I assume because of this it works:
https://github.com/pmndrs/jotai/blob/main/src/vanilla/utils/atomWithStorage.ts#L107-L115

[dai-shi]

Good point. I got confused. Yeah, now I think getOnInit=true only gives us a hydration error, but otherwise it works.
So, if the default localStorage works for you, and custom localStorage or sessionStorage doesn't, your assumption should be correct.

[omridevk]

yes it does, but I wrap all of the stuff that rely on that atom with ClientOnly component, not the "use client" directive.

[dai-shi]

ClientOnly is another solution which avoids SSR. 👍

[DavidJFelix]

I'm pretty sure this is happening because the code is being run serverside where neither localstorage, sessionstorage nor window (containing these) exist. Still working on a solution specific for vite-ssr but I think there have been some solutions for nextjs and remix for this.

[omridevk]

Yup, that is right, but I think it should handle this case as well, wether to check if window is defined or not, I need to look into the source code, but I suspect this is not being handled when providing a custom storage + onInit

[omridevk]

I will try to add this code for now:

try {
      return window.sessionStorage
    } catch (e) {
      if (import.meta.env?.MODE !== 'production') {
        if (typeof window !== 'undefined') {
          console.warn(e)
        }
      }
      return undefined
    }

when I create the sessionStorage.

[omridevk]

this seems to work and solves the issue for me.
Thanks @dai-shi and @DavidJFelix for the quick responses