Next.js hydration issue about remark-math

[nguyenvukhang]

This error disappears when commenting out lines 113-115 in https://github.com/remarkjs/remark-math/blob/7e82f934e77d62b7366825633bc7f1d5d5e5a861/packages/rehype-mathjax/lib/create-plugin.js

      if (found && renderer.styleSheet) {
        context.children.push(renderer.styleSheet())
      }

Though it's still unclear where the root cause is

[wooorm]

well, the root cause is that there is different handling on the server (JSDOM) and a browser (depending on which one your users use). Not sure it can be change,d but feel free to investigate it.

[hkhanna]

I'm having this problem too. One thing I've noticed is that if you inspect a mathjax-generated element, you'll see something like this: <mjx-container classname="MathJax ...>

It should say class=, not classname= when you're inspecting in the browser. For some reason, when combined with MDX, it doesn't properly convert that attribute. If I don't use MDX and use Next.js directly, it works fine, so it has something to do with remark-math and MDX together, I think.

[wooorm]

That seems like a very different problem? The above seems to talk about CSS, you seem to talk about (MathML) attribute conversion?

[hkhanna]

I'm not talking about MathML, at least I don't think I am.

I'm talking about how rehype-mathjax renders the HTML. Just suggesting a possible cause of the hydration error. If somehow it was being rendered as "class" on the server but "classname" on the client, I think that could cause the hydration error.

Interestingly, when I commented out the lines OP suggested, I still got the error. If I switch to rehype-katex the problem goes away.

[wooorm]

oh sorry yeah you’re right, mjx-container is a custom element, not mathml.

when I commented out the lines OP suggested, I still got the error

Yeah, I thought it was a different problem, and this seems to indicate that.

If I switch to rehype-katex the problem goes away.

It does thing completely differently!

[fullykubed]

Can confirm this issue still exists with Next.js 14

[fullykubed]

Can confirm that this solution that avoids adding the css appears to work.