Plyr Layout causing Hydration error in NextJS server components

[dottodot]

Current Behavior:

The default layout doesn't have this issue but when using the Plyr Layout I get

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

The error seems to relate to the class name being undefined

                            <Primitive.div className={undefined} ref={function}>
                              <div
+                               className={undefined}
-                               className={"plyr plyr--full-ui plyr--video "}
                                ref={function}

Steps To Reproduce:

Here's a stackblitz that replicates the issue

https://stackblitz.com/edit/stackblitz-starters-nudlw6qf?file=package.json

Anything Else?

[MatteoGauthier]

Got errors in production with Vidstack Player, for me the player components was breaking during the server rendering. I solved the issue by using this in server mode :

  if (typeof window == "undefined") {
    return null
  }