How to use window.localStorage with prerender

[PrettyCoffee]

I am trying to build a theme toggle that saves the currently selected theme into the local storage.
When executing wmr or wmr build, everything works as expected.
But when trying to build it with wmr build --prerender, it will always throw an error:

The following error was thrown during prerendering:
ReferenceError: window is not defined

This is not what I would expect, but I don't know what I am doing wrong or if this is something to be expected?

Reproduction:

1. npm init wmr local-storage-test
2. Add this in public/index.js:

   window.localStorage.setItem("key", "value")
   

3. run npm run build

The code can also be added within the Home component to trigger the error.

[rschristian]

window is not accessible in Node, where prerendering happens. You'll need to use a window check/guard:

if (typeof window !== 'undefined') {
    window.localStorage.setItem("key", value);
}

[PrettyCoffee]

Aaah, that makes a lot of sense. Thank you very much for this blazing fast answer! :)

[rschristian]

No problem, and if it helps make things clearer, here's a useLocalStorage hook that I had in one of my projects. It's really just a matter of inserting that check before using browser globals.