mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.69k stars 6.07k forks source link

Block diagram: Converting circular structure to JSON #5530

Open OleksiiParastiukSage opened 1 month ago

OleksiiParastiukSage commented 1 month ago

Description

I am currently using next.js@13.5.6 with next-mdx-remote@4.41 and mermaid@10.9.1 installed via npm to create static content. I am able to render every mermaid diagram except for "block-beta". API call to mermaid.render fails with the following error.

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLHtmlElement'
    |     property '__reactFiber$yacdp2ofu2' -> object with constructor 'uk'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at 7877.06c80a12bd10709f.js:1:32088
    at Object.draw (7877.06c80a12bd10709f.js:1:32555)
    at async Object.render$1 [as render] (bc6b29d3-49f0478c8337dde7.js:61:1716)

When object is inspected in the console, it contains the endless structure. Screenshot 2024-05-17 111356

I have a very simple rendering logic placed inside useEffect inside a custom component that replaces code element in markdown files. Unfortunately, I am not able to share the code or provide it in live environment.

Steps to reproduce

Unfortunately, I was not able to reproduce this issue in other projects, so I suspect the issue to be project specific.

Screenshots

No response

Code Sample

useEffect(() => {
        const render = async () => {
              try {
                  const type = mermaid.detectType(text)
                  const { svg } = await mermaid.render(type, text)
                  setSvg(svg)
              } catch (error) {
                  console.log('ERROR', error)
              }
        }

        render()
    }, [])

Setup

Suggested Solutions

No response

Additional Context

No response

OleksiiParastiukSage commented 1 month ago

Update to the issue: the block successfully renders if the logger line inside node modules is removed. Screenshot 2024-05-21 120719