I got the same error while migrating an app to SvelteKit. The FAQ states this is due to how Vite processes imports (even with SSR disabled). See "How do I use a client-side onlyβ¦" in SvelteKit FAQ as well as Issue #754 True SPA mode.
For now, I was able to get this working by disabling SSR on the page that depends on localStorageand importing & globally registering node-localstoragebefore importing the lib that depends on localStorage.
import 'node-localstorage/register';
import { storable } from 'svelte-storable';
The register endpoint in node-localstorage does not overwrite localStorage if it already exists, so you still get the native browser implementation.
In sveltekit, you can check if the piece of code is running on the server or browser, you just have to import the browser variable from the env and then use an if statement to run your code. So it should be something like this
import { browser } from "$app/env";
if (browser){
variable.subscribe((value) => localStorage.user = JSON.stringify(value))
}
Software hacker working in the industry since 2003. Currently loves: #Typescript and #Svelte. Founder of Chimera, the first makerspace in northern California.
Where are you running this? If it is in SvelteKit localStorage won't be defined so you'll have to only use the store in the browser as documented in the Kit docs (see "browser" variable)
I'm doing this in Sapper, I haven't made the switch to Sveltekit yet, so take the with a grain of salt.
I was able to get it work by doing a typeof check and skipping the subscription during SSR.
// stores/user.js
import { writable } from 'svelte/store'
export const user = writable()
// check for localStorage, this won't run on SSR
if (typeof localStorage !== 'undefined') {
user.subscribe((value) => localStorage.user = JSON.stringify(value))
}
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
localStorage is not defined. Error
I got the same error while migrating an app to SvelteKit. The FAQ states this is due to how Vite processes imports (even with SSR disabled). See "How do I use a client-side onlyβ¦" in SvelteKit FAQ as well as Issue #754 True SPA mode.
For now, I was able to get this working by disabling SSR on the page that depends on
localStorage
and importing & globally registeringnode-localstorage
before importing the lib that depends onlocalStorage
.The
register
endpoint innode-localstorage
does not overwritelocalStorage
if it already exists, so you still get the native browser implementation.In sveltekit, you can check if the piece of code is running on the server or browser, you just have to import the browser variable from the
env
and then use an if statement to run your code. So it should be something like thisthis code is running in my code , thank you ,appreciated
Where are you running this? If it is in SvelteKit localStorage won't be defined so you'll have to only use the store in the browser as documented in the Kit docs (see "browser" variable)
I'm doing this in Sapper, I haven't made the switch to Sveltekit yet, so take the with a grain of salt.
I was able to get it work by doing a
typeof
check and skipping the subscription during SSR.