joshnuss / svelte-persisted-store

A Svelte store that persists to localStorage

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Crashes when deployed to Vercel: "undefined is not valid JSON at JSON.parse"

anxpara opened this issue · comments

Just tried deploying to Vercel using the default Vercel adapter settings for the first time, and I got the following error:

Uncaught (in promise) SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at selected-languages.31eb6d16.js:1:416 at Object.b [as subscribe] (index.f940052f.js:1:420) at M (boolean_attributes.6f27350f.js:1:493) at U (boolean_attributes.6f27350f.js:1:591) at Yt (2.08d5e469.js:9:23218) at Et (index.7ec10bb4.js:1:6168) at new Zt (2.08d5e469.js:9:24825) at el (2.08d5e469.js:9:25138) at Et (index.7ec10bb4.js:1:6368)

my selected-languages.ts contains persisted stores for the user's language preferences. clicking the console error took me to this parse call:

import {w as h} from "./index.f940052f.js";
var g = {};
function A(s) {
    return s === "local" ? localStorage : sessionStorage
}
function t(s, p, a) {
    var v, j;
    const c = (v = a == null ? void 0 : a.serializer) != null ? v : JSON
      , E = (j = a == null ? void 0 : a.storage) != null ? j : "local"
      , f = typeof window < "u" && typeof document < "u"
      , o = f ? A(E) : null;
    function l(r, u) {
        o == null || o.setItem(r, c.stringify(u))
    }
    if (!g[s]) {
        const r = h(p, e=>{
            const i = o == null ? void 0 : o.getItem(s);
            if (i ? e(c.parse(i)) : l(s, p), // <- error at this parse call
            f) {
                const n = d=>{
                    d.key === s && e(d.newValue ? c.parse(d.newValue) : null)
                }
                ;
                return window.addEventListener("storage", n),
                ()=>window.removeEventListener("storage", n)
            }
        }

...

The persisted stores have worked fine in my dev builds, and they currently work fine in the preview build. They only crash when i load my Vercel deployment.

Pushed a branch to Vercel with the persisted stores removed (just writables now) and it works with no crashes

Hi @anxpara,

What version of the package are you using?
What is the current value of the key in local storage?

Version is 0.5.0. The initial value of the stores can be undefined or a string, not sure what the value is at the time of that error. Will try to find out

You can check if there is an initial value by logging localStorage.getItem(key) before the store is initialized.

Note that undefined isn't serializable with JSON.stringify which is the default serializer. You can use devalue instead:

import * as devalue from 'devalue'

export const store = persisted('local-storage-key', 'default-value', {
  serializer: devalue,
})

Imho, devalue should be the default serializer, since I would consider this to be a buggy default experience, and "undefined" should be expected from default users.

Anyway, I set devalue as the serializer for all my persisted stores, published to a branch of vercel, and cleared my browser's localstorage.

Most of my stores seem to be working now, but on one of my pages my SvelteKit app crashes on the server side with this error:

local store initial values: ReferenceError: localStorage is not defined at file:///var/task/.svelte-kit/output/server/chunks/selected-languages.js:52:13 at ModuleJob.run (node:internal/modules/esm/module_job:194:25) ReferenceError: localStorage is not defined at file:///var/task/.svelte-kit/output/server/chunks/selected-languages.js:52:13 at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

which I'm guessing indicates that the persisted store is trying to use localStorage in the server at some point. that's all the log info that vercel is giving me. an important detail to note is that I have disabled SSR for all top-level routes except for the page that is crashing. For that page, only the leaf routes have SSR disabled.

I tried to reproduce the error on vercel, but no luck.

Here is the source code I used:
https://www.sveltelab.dev/9ve78945br74gpa

Can you provide a repo that reproduces the error?

Closing as it cannot be reproduced and no reproduction was provided