search

remcohaszing / rehype-mermaid

A rehype plugin to render mermaid diagrams
MIT License
68 stars 8 forks source link

Issues running in browser with react-markdown #1

Closed humphd closed 1 year ago

humphd commented 1 year ago

Based on the warning in the recent release of remark-mermaidjs, I've tried migrating to rehype-mermaidjs. I'm having some issues using it as a drop-in replacement for what I had previously.

Here is what I'm doing:

import ReactMarkdown from "react-markdown";
import rehypeMermaid from "rehype-mermaidjs";
import remarkGfm from "remark-gfm";
...
    <ReactMarkdown
      children={children}
      { /* Previously I did [remarkGfm, remarkMermaid] and it worked well */}
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeMermaid]}

This ends up crashing like so at runtime:

Uncaught caught Error: `runSync` finished async. Use `run` instead
    at assertDone (index.js:566:11)
    at Function.runSync (index.js:352:5)
    at ReactMarkdown (react-markdown.js:106:30)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)

I also note that upon installation, I get this warning:

warning "rehype-mermaidjs > mermaid-isomorphic > mermaid > @khanacademy/simple-markdown@0.9.2" has incorrect peer dependency "react@16.14.0"

My goal is to be able to use a plugin to render Mermaid blocks in React Markdown. Perhaps this package isn't the best fit? Or maybe I'm missing something.

remcohaszing commented 1 year ago

I didn’t realize this at the moment of writing, but this is another breaking change. I’ll add this to the release notes. Both remark-mermaidjs@5 and rehype-mermaidjs are now asynchronous in the browser. There’s not much I can do about it, as mermaid.render() is now asynchronous. Unfortunately remark-markdown can’t use async plugins at the moment (https://github.com/remarkjs/react-markdown/issues/680).

I recommend to stay on remark-mermaidjs@4 for now. Most of the benefits don’t affect browser usage anyway.

I also note that upon installation, I get this warning:

warning "rehype-mermaidjs > mermaid-isomorphic > mermaid > @khanacademy/simple-markdown@0.9.2" has incorrect peer dependency "react@16.14.0"

A fix for this hast just been merged (https://github.com/mermaid-js/mermaid/pull/4350#event-9187183410). This warning will go away soon.

ngnhat commented 1 year ago

@remcohaszing They have merged it. I hope this issue gets fixed soon.

remcohaszing commented 1 year ago

https://github.com/remarkjs/react-markdown/issues/680 is still open.

As for the warning, that has been fixed. You may need to regenerate your lockfile.