Next.js hydration issue

[nguyenvukhang]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

remark-math, rehype-mathjax, all latest versions

Link to runnable example

No response

Steps to reproduce

yarn create next-app
yarn add @next/mdx @mdx-js/loader @mdx-js/react remark-math rehype-mathjax

create a next.config.mjs with the contents:

import mdx from "@next/mdx";
import remarkMath from "remark-math";
import rehypeMathJax from "rehype-mathjax";

const withMDX = mdx({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeMathJax],
  },
});

export default withMDX({
  reactStrictMode: true,
  pageExtensions: ["tsx", "jsx", "mdx"],
});

Expected behavior

Should render without errors.

Actual behavior

Renders correctly, but with the error
Error: Text content does not match server-rendered HTML.

Runtime

Node v16

Package manager

yarn 1

OS

macOS

Build and bundle tools

Next.js (bug is seen on both v13 and v12)

[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.