Vercel Next.JS success/error/success/error... pattern when page is refreshed with window is not defined

Question

I'm trying to improve a Next.js site deployed on Vercel.

I've realized that when I deploy the page I get the following error first:

GET] /
17:53:00:19
2022-09-12T14:53:00.262Z    938c1a2e-ce7c-4f31-8ad6-2177814cb023    ERROR   Uncaught Exception  {"errorType":"ReferenceError","errorMessage":"window is not defined","stack":["ReferenceError: window is not defined","    at Timeout._onTimeout (/var/task/.next/server/pages/index.js:291:26)","    at listOnTimeout (internal/timers.js:557:17)","    at processTimers (internal/timers.js:500:7)"]}
[ERROR] [1662994380263] LAMBDA_RUNTIME Failed to post handler success response. Http response code: 400.
RequestId: 2f3b61aa-5dc8-4c12-a71c-6cc652a75ccc Error: Runtime exited with error: exit status 129
Runtime.ExitError

Then, if I refresh on browser, it loads perfectly. Then, if I refresh again I get the same error again, then if I refresh, it loads, and so on.

This pattern repeats forever.

It probably has something to do with window and server-side rendering (and window not being present there) but I'm struggling with why it results in an alternating success/error pattern between web page visits.

My actual code is in TypeScript and there is no line 291 on index.tsx file. However I do have transpiled JS versions of them in .next/static/chunks/pages and .next/server/pages folders, though one of them has "use strict" on line 291 and the other has a comment so I couldn't find anything useful regarding the stack trace line numbers.

PS: I'm new to Next.js and it's a project that I took over. I'd be glad to be explained what I do wrong in detail if I'm doing something terribly wrong.

Answer 1

I've solved the issue by wrapping every call to window in if(typeof window !== 'undefined') statements, though I still keep the question open as I'm curious of that alternating error pattern:

Why it was erroring every 2nth time instead of always or never?