Hydration error with code blocks (Next.js)

[blakecss]

I'm getting a hydration error in next.js when parsing markdown code blocks with a language specifier. For example:

```html
<div>test</div>
```

Is this an extra plugin that I need to enable? It creates proper html (className="language-html" etc), so I assumed it was included, but like I said, it gives me this error every time:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching text node for "<div>test</div>
" in <code>.

If I remove html from the markdown, then it works fine.

[wooorm]

This doesn’t normally happen. You likely have other things going on. Projects that do things with that html flag. There is not enough info to help you.

[ChristianMurphy]

Welcome @RiceCrisp! 👋
Sorry you ran into a spot of trouble.
As @wooorm notes there isn't enough here to offer much of a suggestion.

There are multiple different ways you could be using remark, react-markdown, or mdx.
As well as many possible ways to configure syntax highlighting and next.js.
Our support guide offers some great suggestion of how you can help us help you https://github.com/remarkjs/.github/blob/main/support.md

In particular a sandbox with a run-able example would help encapsulate all the dependencies, version, and configuration in one spot.
Focus on boiling that sandbox down to a minimally reproducible example https://stackoverflow.com/help/minimal-reproducible-example
https://next.new is a potential starter sandbox you would work with.

[blakecss]

Thanks, I've boiled it down to something with the way OTHER components are imported (possibly caused by barrel file imports). I'll repost if I'm able to create a small project example.