rehype-mathjax hydration issue with Next.js

[danieldanhe]

I’ve already posted this question on Stack Overflow for about a day without a response, so I’m posting it here in hopes of someone understanding how to solve it.

I’ve set up MDX with Next.js and I’m able to use it to set up pages. I’m also able to add plugins to remark and rehype through next.config.mjs. Although normal Markdown syntax and components work fine, I haven’t been able to set up MathJax with CHTML using remark-math and rehype-mathjax.

MathJax is being processed on the server side, but I’m seeing problems in my generated HTML markup where className is used for MathJax elements instead of the standard HTML class, causing styles to not working and math not to display. For example, the following appears in my output:

<mjx-c className="mjx-c2212"></mjx-c>

This issue appears in a Next app, so you can reproduce the issue by using npx create-next-app with npm install @next/mdx @mdx-js/loader @mdx-js/react rehype-mathjax remark-math. Then add this to next.config.mjs:

import nextMDX from "@next/mdx";

import remarkMath from "remark-math";
import rehypeMathjaxChtml from "./rehype-mathjax/chtml.js";

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkMath],
    rehypePlugins: [
      [
        rehypeMathjaxChtml,
        {
          chtml: {
            fontURL:
              "https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2",
          },
        },
      ],
    ],
  },
});
const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  reactStrictMode: true,
};

export default withMDX(nextConfig);

Create a page such as index.mdx with math, for example $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$. The generated markup will include classNames for MathJax elements such as mjx-container instead of classes.

[wooorm]

See also remarkjs/remark-math#80.

[danieldanhe]

See also remarkjs/remark-math#80.

Oh yeah I forgot to link that one. I have the same problem as one of the comments there, I just thought it would be nice to post it here as well as it seems to be more of a MDX issue.