Mermaid diagrams do not render text nodes (empty `foreignObject`)

pwizla commented 3 days ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

Docusaurus 3.5.2 (but in my testings it's reproducible with many other, if not all, 3.x.x versions)

Mermaid diagrams are rendered with empty text nodes. foreignObject DOM nodes are empty.

Reproducible on new.docusaurus.io: https://codesandbox.io/p/devbox/dawn-darkness-docusaurus?privacy=public

Screenshot 2024-09-27 at 11 34 11

I'm in the process of upgrading to Docusaurus 3. Mermaid diagrams were working perfectly with Docusaurus v3.5.1 a few weeks ago. Today, they don't seem to work as expected with 3.5.x, and, weirdly enough, I can't have them work in any other 3.x.x version either, including versions that were previously rendering diagrams perfectly 🤔

Reproducible demo

https://codesandbox.io/p/devbox/dawn-darkness-docusaurus?privacy=public

Steps to reproduce

Create new project

Ensure mermaid theme is in the dependencies ("@docusaurus/theme-mermaid": "3.5.2",), and Mermaid is properly configured in docusaurus.config.js:

markdown: {
  mermaid:  true,
},

themes: ['@docusaurus/theme-mermaid'],

Insert a basic Mermaid diagram in a Markdown file, for instance at the top of the "Congratulations!" page in CodeSandbox. For instance like in the following excerpt:

# Congratulations!

You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.

 ```mermaid
 graph TD
   A --> B



4. Notice how the page renders the diagram but without any text, and inspect the DOM to notice that `foreignObject` nodes are empty, while they should contain text elements in a diagram properly rendered.

Expected behavior

Properly rendered diagram with text nodes It shouldn't be a Mermaid syntax issue because our original diagram, working on Docusaurus 2.xx and on our live website, is also working on mermaid.live.

Actual behavior

Empty text nodes:

Screenshot 2024-09-27 at 11 34 11

No error in the console (DevTools or server) 🤷

Your environment

Public source code: github.com/strapi/documentation/ Go to the repo/docu3upgrade branch to see a non-working version of Mermaid, and to the main branch or on our live website (Docusaurus 2.x) to see it work 😄
Public site URL: see this page for instance: https://documentation-git-repo-docu3upgrade-strapijs.vercel.app/dev-docs/api/content-api where empty text nodes are rendered
Docusaurus version used: 3.5.2
Environment name and version (e.g. Chrome 89, Node.js 16.4): Usually Firefox 130.x but the bug is reproducible on Chrome and Safari as well
Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS Sonoma 14.5 for me, but colleagues with different OSes reproduced the issue

Self-service

[x] I'd be willing to fix this bug myself. (if I find a way to fix it 😄 , but for now I feel stuck 😅)

tramoni-vl commented 3 days ago

I'm having the same issue and it was even working yesterday 🤷🏻‍♂️ So maybe a dependency somewhere is causing the havoc

slorber commented 3 days ago

Note: your codesandbox is not a repro and doesn't contain any Mermaid-related code.

But I can reproduce on Stackblitz v3.5.2 with mermaid@10.9.1 dependency (latest 10.x)

It worked on our website under 10.4.0 and now that we upgraded to 11.2.1 (Docusaurus v3.6 soon) it keeps working so it is very likely a dependency that broke this but maybe not mermaid directly.

https://docusaurus.io/docs/markdown-features/diagrams#usage

tramoni-vl commented 3 days ago

Note: your codesandbox is not a repro and doesn't contain any Mermaid-related code.

But I can reproduce on Stackblitz v3.5.2 with mermaid@10.9.1 dependency (latest 10.x)

It worked on our website under 10.4.0 and now that we upgraded to 11.2.1 (Docusaurus v3.6 soon) it keeps working so it is very likely a dependency that broke this but maybe not mermaid directly.

https://docusaurus.io/docs/markdown-features/diagrams#usage

Yhea i suppose that if you try to rebuild your current working website at this date, the diagrams will do not show any texts

slorber commented 3 days ago

Indeed it's a bug in a transitive dependency that was released 1d ago.

DOMPurify v3.1.7 breaks Mermaid.

You can fix it by downgrading to v3.1.6 with package manager features, for example Yarn resolutions:

  "resolutions": {
    "dompurify": "3.1.6"
  },

I created issues here:

DOMPurify: https://github.com/cure53/DOMPurify/issues/1002
Mermaid: https://github.com/mermaid-js/mermaid/issues/5904

pwizla commented 15 hours ago

Thank you very much, @slorber! Pinning dompurify to 3.1.6 worked for me 🥳 Would you like me to close this issue now, or shall we keep it open for reference and/or until DOMPurify 3.1.8 is released with the new option?

slorber commented 14 hours ago

Np

We can keep it open until we are able to make it work by default for all newly initialized sites. We are waiting for Mermaid's position to figure out what to do.

Using yarn resolution works but we don't want to keep it this way forever, it's not good DX to have to ask users to do this.

facebook / docusaurus