Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block diagram: Converting circular structure to JSON #5530

Open
OleksiiParastiukSage opened this issue May 17, 2024 · 1 comment
Open

Block diagram: Converting circular structure to JSON #5530

OleksiiParastiukSage opened this issue May 17, 2024 · 1 comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@OleksiiParastiukSage
Copy link

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

  • Mermaid version: 10.9.1
  • Browser and Version: Chrome 125

Suggested Solutions

No response

Additional Context

No response

@OleksiiParastiukSage OleksiiParastiukSage added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels May 17, 2024
@OleksiiParastiukSage
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

1 participant