Astroでmermaidを使うためにrehypeMermaidを入れたらCloudflareでビルドエラーが発生したときの対処法

こんにちは、吉田智哉です。
Astroでmermaidを使うためにrehypeMermaidを入れたら、Cloudflareでビルドエラーが発生したときの対処法について解説します。

今回の問題ですが、手元のパソコンでビルドすると問題なく動作するのですが、Cloudflareでビルドするとエラーが発生しました。

どうやらCloudflareだとplaywrightを使ってmermaidの図を生成するため、ビルド時にエラーが発生しているようです。

対処法

astro.config.mjsの設定を以下のように変更して、mermaidの図をクライアントサイドで生成するようにします。
strategyをpre-mermaidに設定します。

import { defineConfig } from 'astro/config';
import rehypeMermaid from 'rehype-mermaid';

export default defineConfig({
  markdown: {
    rehypePlugins: [[rehypeMermaid, { strategy: 'pre-mermaid' }]],
  },
});

strategyをpre-mermaidに設定すると、markdownからHTMLに変換処理だけが行われるようになります。
そのため、markdownのブロックには変換されるのですが、図には変換されません。
https://github.com/remcohaszing/rehype-mermaid?tab=readme-ov-file#pre-mermaid

そのため、layoutファイルなどでクライアントサイドでmermaid図に変換する必要があります。

<script>
  import mermaid from 'mermaid'
  mermaid.initialize({ startOnLoad: true })
</script>

これでCloudflareでのビルドエラーが解消されて、かつクライアントサイドでmermaid図が生成されるはずです。