persisted store results in ReferenceError: window is not defined

[ak4zh]

No description provided.

[sureshjoshi]

Any sample code? Any environment information? This is hard to debug otherwise, as I don't see this problem.

[Akolyte01]

Please also include which version of the package you are using from your lock file.

[ekrata-main]

/node_modules/@square/svelte-store/lib/persisted/storage-utils.js:7
    return window.localStorage.getItem(key);
    ^

ReferenceError: window is not defined
    at getLocalStorageItem (/node_modules/@square/svelte-store/lib/persisted/storage-utils.js:7:5)
    at eval (/node_modules/@square/svelte-store/lib/persisted/index.js:75:29)
    at Generator.next (<anonymous>)
    at fulfilled (/node_modules/@square/svelte-store/lib/persisted/index.js:6:58)

Node.js v19.8.1

This is only fixed when I turn ssr off at the root .ts file

[Akolyte01]

Anything rendered server side is not going to have access to the window object and thus persisted stores won't work.

https://learn.svelte.dev/tutorial/ssr

[Akolyte01]

Closing for now. Feel free to reopen with more details if this is not an issue of SSR not having access to the window object.

[mattpilott]

I think this should be reopened, as the persisted store example doesnt run in sveltekit out of the box. Any client side storage of course wont run in a project enabled for SSR but what i would expect is for persisted to do the checking and waiting internally

[based64-eth]

so what is the recommended way of implementing client-side persisted store on a ssr-capable app?

[squeedee]

This works for me:

// src/lib/stores.ts

const createStarredWorkloads = () => {
    const {subscribe, update} = persisted(
        {},
        'STARRED',
        {storageType: "LOCAL_STORAGE"}
    )
    return {
        subscribe,
        update,
        star: key => update((a) => {
            if (a[key]) {
                a[key] = false
            } else {
                a[key] = true
            }
            return a
        }),
    }
}

export const starredWorkloads = browser ? createStarredWorkloads() : readable();

Seems like as soon as we hit the client, the starredWorkloads store is resubbed? It might be the side effect of me doing other dynamic loading, so not sure if YMMV.