Error when evaluating SSR module /src/stores.js: ReferenceError: localStorage is not defined

user_15241135 0
Viewed 196

I'm trying to make a Svelte website that stores user info when reloading. I'm getting the following error:

Error when evaluating SSR module /src/stores.js: ReferenceError: localStorage is not defined

The page loads properly (including localStorage.user and localStorage.isLoggedIn) after reloading and this error only appears at first.

Here is my stores.js file:

import { writable } from "svelte/store";

const storedUser = JSON.parse(localStorage.user);
export const user = writable(storedUser);
user.subscribe((value) => localStorage.user = JSON.stringify(value));

export const isLoggedIn = writable(localStorage.isLoggedIn === "true");
isLoggedIn.subscribe((value) => localStorage.isLoggedIn = String(value));

How do I fix this error (and why doesn't it show up after reloading?)

svelte server-side-rendering local-storage javascript
1 Answers

I realized that I have to check if there was a browser environment before accessing localStorage (thought I'd post the answer here).

Just import { browser } from '$app/env';, and you can use if (browser).

Here's my new stores.js file that should at least solve the error:

import { writable } from "svelte/store";
import { browser } from '$app/env';

var storedUser = {};
if (browser) {
    storedUser = JSON.parse(localStorage.user);
}
export const user = writable(storedUser);
user.subscribe((value) => {
    if (browser) {
        localStorage.user = JSON.stringify(value);
    }
});

var storedLogin = false;
if (browser) {
    storedLogin = (localStorage.isLoggedIn === "true");
}
export const isLoggedIn = writable(storedLogin);
isLoggedIn.subscribe((value) => {
    if (browser) {
        localStorage.isLoggedIn = String(value);
    }
    
});
user_152411350
Related