mermaid with Remix ESM module

[angelinekwan]

Does anyone tried mermaid with Remix ? With the new v10, it support ESM only. Failed to get it working properly might be due to Remix to bundle the ESM module directly into the server build instead of requiring it at runtime causing the text node not matching between server and client side.

This code example works with basic react app setup but not in the context of Remix.

The following code example works sometime or in the case of multiple diagrams didn't get render with the following error, probably due to Remix to bundle the ESM module directly into the server build instead of requiring it at runtime causing the text node not matching between server and client side.

// markdown.tsx
import React from "react";
import ReactMarkdown from "react-markdown";
import remarkDirective from "remark-directive";
import remarkDirectiveRehype from "remark-directive-rehype";

import { Mermaid } from "~/components/mermaid";

declare global {
	namespace JSX {
		interface IntrinsicElements {
			mermaid: { id: string; children: string };
		}
	}
}

interface Props {
	content: string;
}

export function MarkDown({ content }: Props) {
	return (
        <ReactMarkdown
            components={{
                mermaid: Mermaid,
            }}
            children={content}
            remarkPlugins={[
                remarkDirective,
                remarkDirectiveRehype,
            ]}
        />
	);
}

// components/mermaid.tsx
import React from "react";
import mermaid from "mermaid";

type MermaidProps = {
  children: string;
};

export function Mermaid({
  children,
}: MermaidProps) {

  React.useEffect(() => {
    const renderDiagram = async () => {
      mermaid.initialize({
        startOnLoad: false,
      });
      await mermaid.run({
        querySelector: ".mermaid",
        //suppressErrors: true,
      });
    };
    renderDiagram();
  }, [children]);
  
  if (!children) return null;

  return <div className="mermaid">{children}</div>;
};

Importing ESM package to Remix - guide

//remix.config.js
module.exports = {
	serverDependenciesToBundle: [
		/^rehype.*/,
		/^remark.*/,
		/^react-markdown$/,
		/^mermaid.*/,
		/^khroma*/,
		/^d3*/,
		/^lodash-es*/,
		/^dagre-d3-es.*/,
		/^robust-predicates*/,
		/^internmap.*/,
	],
};

Shortcode in markdown
::mermaid[flowchart TD;Start-->Stop;]{id="1"}

Expected to render this diagram