CODEWITHSUNDEEP
javascriptreactjsnext.jsmdxjshydration
antonwilhelm
antonwilhelm

Reputation: 7553

Next.JS + MDX-Bundler Hydration Error when MDX Component is Wrapping children in New Lines

I am using next.js + mdx-bundler. I have a very basic component that I use within my mdx.

This works:

Mdx is a great <Component>format and I like it a lot</Component>.

Mdx is a great 
<Component>format 
and I like it a 
lot</Component>.

However, if I want to align the component more code-like, opening & closing tags on top and bottom, children just inbetween, it breaks:

Mdx is a great 

<Component>
format and I like it a lot
</Component>.

I get a hydration / mismatch error :

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

And I am not sure why that is? Also, it doesn't seem to happen with all my components. It's just really annoying because it means I can't use / rely on prettier to format my mdx.

Upvotes: 1

Views: 852

Answers (1)

felguerez
felguerez

Reputation: 920

You can render items inline and next to one another by wrapping them in a JSX element:

<span>Mdx is a great <Component>format and I like it a lot</Component>. 
 **Markdown syntax still works inside this span**.</span>

[//]: # (or even)

<>MDX is a great <Component>format and I like it a lot</Component>.</>

Upvotes: 0

Related Questions