[Next 13] 'window' is not defined

[erickriva]

It happens in a Next 13 page (app folder) marked as a client component with use client directive.

Imported as: import * as webauthn from "@passwordless-id/webauthn";
Used as: {webauthn.client.isAvailable() && "available"}

[dagnelies]

I'm not very familiar with nextjs and your project. I can just say that isAvailable() is meant to be called at runtimevin the browser (to discover the browser/platform capabilities). It is not something to be called server-side and pre-rendered. So of course the window object is necessary at that point. The issue as far as I understand is unrelated to this library but because you use isAvailable() to pre-render server side. Feel free to reopen the issue if I missed something.

[dagnelies]

...that goes for all the webauthn.client.* stuff of course. It's for the browser at runtime, not for server side rendering.

[erickriva]

vercel/next.js#47028 (comment)
Searching for similar discussions, I've found this sentence: "Client components are rendered on the server too.". Therefore, window is undefined in first render.

To solve it on Next project, there's need for a useState and a useEffect, adding complexity to codebase to every component where this lib is called.

Can't this lib check for typeof window !== undefined before to do what's necessary? Obviously, if complexity don't increase as much as I mentioned.

[dagnelies]

Without window, the lib obviously cannot check if WebAuthn is available for that browser. It doesn't even make sense.