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

Hi all! I have this issue using this lib with React 18.

My libs:

{
    "next": "12.1.6",
    "next-mdx-remote": "^4.0.3",
    "react": "18.1.0",
    "react-dom": "18.1.0",
}

Any solution?

[BRKalow]

I agree! Unfortunately these errors are coming directly from React, so there is not a ton we can do in this library.

[Gelio]

Yes, you are right about the spec, that’s definitely invalid. The error message is slightly perplexing though and the console errors do not help diagnose the problem.

Here is the DOM hierarchy I got when the page was server-side rendered and I had JavaScript enabled:

Most errors in the console look like this:

In the middle of the console errors there is a buried error message explaining the root of the problem:

What would help is making the error message for the actual cause more prominent, or making it appear as one of the first/last errors logged to the console. Right now it appears in the middle of the list of 19 errors, 18 of which are the same.

I’m suggesting what would make issues like these one easier to debug without looking for help online. I don’t expect any changes, just offering suggestions