Not sure how to debug "window is not defined" during prerender

[flpvsk]

At some point working on a project pre-render stopped working with "window not defined" error. I'm guessing it is because of one of the libraries, but I have no idea how to find which one and where to patch it.

Repo and branch with reproduction: https://github.com/flpvsk/log-into-earth/tree/bug/prerender-broken

Stack trace

vite v6.0.5 building for production...
✓ 26 modules transformed.
x Build failed in 1.75s
error during build:
[preact:prerender] window is not defined
    at Qn (file:///.../node_modules/@preact/preset-vite/headless-prerender/index-DfheSjpB.js:1:77531)
    at Cr (file:///Volumes/hdd/Projects/log-into-earth/node_modules/@preact/preset-vite/headless-prerender/index-DfheSjpB.js:1:77179)
    at Object.Kn (file:///.../node_modules/@preact/preset-vite/headless-prerender/index-DfheSjpB.js:1:77697)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:5260)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:5936)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:5936)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:5936)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:4478)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:5936)
    at w (file:///.../node_modules/@preact/preset-vite/headless-prerender/prerender-BBy3N5aT.js:1:7412)

package-lock.json: https://gist.github.com/flpvsk/165972441d5c09fa026ff143233a2568

[rschristian]

Our error positioning was a bit broken up to #149 unfortunately. I won't be able to take a look until later but it's something you could start with if you desired.

Alternatively, the file is written to disk; upon erroring, you could open the file path and debug the built file, though it's a bit rough doing this as it is of course minified by Vite.

Edit (doing this from my phone): this is a likely candidate to check: https://github.com/flpvsk/log-into-earth/blob/580a5a2866d1b00512e0505535c21c4414cb8ac6/src/hooks/useUserInfo.ts#L52

[flpvsk]

Thanks! The window reference you found was indeed the one :/ But now I'm seeing history is not defined Which I'd guess comes from preact's own Router?

In any case, not sure if having this issue is valuable, if you are already working on improving the stack trace of that error. Please feel free to close it if it's not!

[rschristian]

Your redirect methods might be problematic, will take a look.

I'll try to get a release out later, I do fully understand it's miserable to debug stuff at the moment. Sorry.

Your issue is totally fine though, in lieu of decent error messages the least I can do is help out myself :)

[rschristian]

Looking at your issue, (which I see you've "fixed" by wrapping route() in history checks), I'd very strongly suggest against using route() bare like that, it should always be behind some handler or in a useEffect(). Using it like that will inevitably cause hydration issues as the client result won't match the server. Calling it in useEffect(), after hydration completes, gets around this.

We could probably use some docs in preact-iso mentioning that, I see that's something users will likely will stumble into.

[rschristian]

I ended up doing some work and splitting out the prerendering plugin; the errors should be much improved now:

Source

error during build:
[vite-prerender-plugin] [plugin vite-prerender-plugin] 

ReferenceError: window is not defined

This is most likely caused by using DOM/Web APIs which are not available
available to the prerendering process running in Node. Consider wrapping
the offending code in a window check like so:

if (typeof window !== "undefined") {
    // do something in browsers only
}

> /home/ryun/Projects/log-into-earth/src/hooks/useUserInfo.ts:57:12

  55 │     return makeOkResult(UserInfoSchema.parse(json))
  56 │   } catch (e: unknown) {
▶ 57 │     window.localStorage.removeItem("user")
     │            ▲
  58 │     return makeErrorResult(e as Error)
  59 │   }
  60 │ }

The route() during prerender is still an issue, not quite sure if we want to address that with docs, warnings, or throwing though (or some combination of the above). Feel free to make an issue on the preact-iso repo but it's something I'll keep in mind & mull over either way.