search

hashicorp / next-mdx-remote

Load MDX content from anywhere
Mozilla Public License 2.0
2.73k stars 141 forks source link

ReactPlayer as component causing "Hydration failed" #483

Open maxiedaniels opened 5 days ago

maxiedaniels commented 5 days ago

Describe the bug

I'm using compileMDX to compile markdown, and I'm including a videoCard component in my components that I pass along, which contains ReactPlayer. videoCard has "use client".

I'm getting "Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error" when I view this page, but the player works great. I also tried npm run build and npm run start, and there's no error then, so I'm really unclear on if this is an actual issue.

If I comment out the ReactPlayer instantiation inside the videoCard component, the error goes away.

Can anyone help me understand what's happening? The docs say, when discussing compileMDX:

<MDXRemote /> must be rendered on the server, as it is now an async component. Client components can be rendered as part of the MDX markup

Reproduction

No reproduction

next-mdx-remote version

v5.0.0

talatkuyuk commented 1 day ago

I want to help you. Can you provide a minimum production code (repo/sandbox) for the issue in order us to understand the problem.