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.

[fullykubed]

Can confirm this issue still exists with Next.js 14

[wooorm]

This is a problem with Next or React, as it can be reproduced without all these packages, with a reasonable example.
Replacing page.tsx, or a similar Next app page, with:

export default function Home() {
  return (
    <div>
      <main>
        <style>[title="a"] &#x7b; color: violet &#x7d;</style>
        <div title="a">Hi!</div>
      </main>
    </div>
  );
}

While this works (the div becomes violet), it yields the react warning:

Warning: Text content did not match. Server: "a[b="c"] { color: red }" Client: "a[b="c"] { color: red }"
    at style
    at main
    at div
    at Home (Server)

And then the Next error:

Uncaught Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Please raise this with Next/React. Thanks

[alexharri]

For anyone else encountering this, I'm working around the issue like so:

import { SerializeOptions } from "next-mdx-remote/dist/types";

async function rehypeMathjax() {
  const plugin = (await import("rehype-mathjax/svg")).default({ svg: { scale: 1 } });
  return () => (tree: import("hast").Root) => {
    plugin(tree);

    // If the last added child in the tree is a stylesheet containing 'mjx-container',
    // remove it. It causes Next.js hydration errors.
    //
    // Workaround for https://github.com/remarkjs/remark-math/issues/80.
    const lastChild = tree.children[tree.children.length - 1];
    if (lastChild.type === "element" && lastChild.tagName === "style") {
      const content = lastChild.children[0];

      // Make sure that this is a Mathjax related stylesheet before removing it.
      const isMathjaxStylesheet =
        content.type === "text" && content.value.includes("mjx-container");
      if (isMathjaxStylesheet) {
        tree.children.pop(); // Remove!
      }
    }
  };
}

export const getMdxOptions = async (): Promise<SerializeOptions["mdxOptions"]> => ({
  remarkPlugins: [(await import("remark-math")).default],
  rehypePlugins: [await rehypeMathjax()],
});

On the library side, it would be nice if it was possible to disable the stylesheet injection via an option like injectStylesheet: false.

[wooorm]

Please see my comment before yours. It would be nice if you raise this in the correct place? Which I believe to be next, so that it can be solved. Thank you