block-beta not rendering but graph TD does. what's wrong?

[MikeAndFriends]

Hi!
I have implemented mermaidjs in a nextjs site stored locally on my machine. I have created a mermaid rendering component which takes mermaidcode as an input. I have a drop down selector which enables user to select weather to display result as block-beta or graph TD. However only graph TD is working. The block-beta gives me error "Invalid syntax. Syntax error in text. mermaid version 11.4.1"

mermaid code that works like a charm (cut out from console log):

graph TD; 180["Ekonomi"]; 181["Ekonomihantering"]; 180 --> 181; 182["Bokföring"]; 181 --> 182; 183["Betalning"]; 181 --> 183;

mermaid code that result in error (cut out from console log):

block-beta block:group_180["Ekonomi"] block:group_181["Ekonomihantering"] endnode_182["Bokföring"] endnode_183["Betalning"] end end

(with or without semicolon and/or node text does not make a difference)

Now, both code snippets do work when pasting them into mermaid live editor, so why do one of them fail when executing the code locally?

Any hints on things I could try? Could it be that my version of mermaid doesn't allow block-beta?

this is my mermaidchart.jsx-code (that works just fine for the graph TD...

`
import React, { useEffect, useRef, useState } from 'react';
import mermaid from 'mermaid';

const MermaidChart = ({chartCode}) => {
console.log('MermaidChart received chartCode', chartCode);
const outputRef = useRef(null);

useEffect(() => {
    // Initialize Mermaid
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
      theme: 'dark', 
     });

    // Optional: Ensure Mermaid is loaded, you might want to dynamically load the library
    // and only execute this effect once the library is confirmed to be loaded.
}, []);

async function renderDiagram() {
    if (outputRef.current && chartCode) {
        try {
            const { svg } = await mermaid.render("theGraph", chartCode);
            outputRef.current.innerHTML = svg;
        } catch (error) {
            outputRef.current.innerHTML = "Invalid syntax";
        }
    }
}

useEffect(() => {
    renderDiagram();
}, [chartCode]);

return (
    <div>
        <div ref={outputRef} />
    </div>
);

};

export default MermaidChart;
`

ps. I have node v23.7.0 and mermaid version 11.4.1.

[MikeAndFriends]

seems to be related to this issue: #5530

[MikeAndFriends]

This is the error code I get:

parseError err TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLHtmlElement'
    |     property '__reactFiber$isw9vlskz5' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at setBlockSizes (blockDiagram-ZHA2E4KO.mjs:1583:105)
    at setBlockSizes (blockDiagram-ZHA2E4KO.mjs:1574:7)
    at layout (blockDiagram-ZHA2E4KO.mjs:1745:3)
    at Object.draw (blockDiagram-ZHA2E4KO.mjs:3731:18)
    at async Object.render (mermaid.core.mjs:1013:5)