1

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.

antonwilhelm
  • 5,768
  • 4
  • 19
  • 45
  • Have you consider using a prettier so that your code is automatically indent (also managing new line, etc.) each time you save your file? I do that on my projects and never have an issue with NextJS hydration. – Xavier Garnier Oct 14 '22 at 07:35
  • Hi, you can post an codesandbox example plz? Despite what @Xavier Garnier is true, there may be another way to solve your problem by reviewing the code, thank you in advance, and I wish you success in your professional career – Lucas Paixão Oct 16 '22 at 00:55
  • @XavierGarnier thats actually what makes my code break right now. I dont think it's a Next.JS issue per se, but has more to do with mdx-bundler and esbuild. – antonwilhelm Oct 16 '22 at 08:22

0 Answers0