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?)
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);
}
});