React-hydration-error when using next-mdx-remote

[ityspace]

I use Next.js, chakra-ui, next-mdx-remote to build my blog.

import React from "react";
import {Mermaid} from 'mdx-mermaid/lib/Mermaid'



const MDXComponents = {
  mermaid: Mermaid, 
};

export default MDXComponents;

import { serialize } from "next-mdx-remote/serialize";

import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";
import mdxMermaid from 'mdx-mermaid';

const serializePost = async (
  content: string,
): Promise<MDXRemoteSerializeResult> => {
  return await serialize(content, {
    mdxOptions: {
      remarkPlugins: [
        remarkParse,
        remarkGfm,
        remarkMath,
        remarkToc,
        mdxMermaid,
      ],
      rehypePlugins: [rehypeKatex],
    },
  });
};

export default serializePost;

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "" Client: "graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

How can I resolve it?

[igloo1505]

I'm sorry to interject with something unrelated... I know this is a no-no, but does Katex give you an hydration error? If not did you have to do anything special to get rid of it? I have a pretty robust app using Mathjax and I get hydration errors on every single page because of the delay in generating the svg's.

[ethernal]

@ityspace have you been able to solve the issue I am facing the exact same thing with various plugins or with custom implementation, what is more editing MDX breaks the rendering (renders text not the graph). I was able to work around this sometimes with removing the parsed content attribute but still the hydration errors occur.

Thanks in advance.