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.

Sign up for GitHub

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

Jump to bottom

v10.1.0 Regression: Unexpected svg element not in render tree error #4280

Closed
luin opened this issue Apr 5, 2023 · 3 comments · Fixed by #4436
Closed

v10.1.0 Regression: Unexpected svg element not in render tree error #4280

luin opened this issue Apr 5, 2023 · 3 comments · Fixed by #4436
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@luin
Copy link
Contributor

luin commented Apr 5, 2023

Description

Looks like there is an issue in 4d1d1c3 where if you are measuring an empty text, Mermaid v10.1.0 throws an error of "svg element not in render tree" while the root element is in the DOM tree.

Steps to reproduce

  1. Go to https://codepen.io/luin/pen/zYmOXgv
  2. Open console, there is an error "svg element not in render tree"

Screenshots

No response

Code Sample

<body>
  <div id="graphDiv">chart</div>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs';
    mermaid.initialize({
      startOnLoad: false,
      fontFamily: 'inherit',
    });
    const graphDefinition = `sequenceDiagram
    autonumber
    actor Application code
    participant Item 1
    participant Item 2
    participant Item 3
    Application code->>Item 1: Subscribe
    activate Item 1
    Item 1 ->> Item 1: Pause
    Item 1 ->> Item 2: Subscribe to block  <br> 
    activate Item 2
    Note over Item 1,Item 2: Uses some stuff
    Item 2 ->> Item 2: Save this
    Item 2 ->> Item 3: Request the next part from another component
    Item 3 -->> Item 2: Return the next part
    Item 2 -> Item 3: Request the data
    Item 3 ->> Item 2: Stream data 
    note over Item 2: Data streaming goes through Item 2, <br> but we want to avoid collecting the data here. <br> Item 2 is aware when the stream ends.
    Item 2 -->> Item 1: Stream data
    deactivate Item 2

    Item 1 -> Item 2: Resume 
    Item 2 --> Item 1: Stream 
    Item 1 --> Application code: Notify subscription successful
`;
    const drawDiagram = async function() {
      const element = document.querySelector('#graphDiv');
      const {
        svg,
      } = await mermaid.render('graphDiv', graphDefinition);
      element.innerHTML = svg;
    };
    drawDiagram().then(console.log, console.log);
  </script>
</body>

Setup

  • Mermaid version: v10.1.0
  • Browser and Version: Chrome

Additional Context

No response
@luin luin added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Apr 5, 2023
@luin luin changed the title Unexpected svg element not in render tree error v10.1.0 Regression: Unexpected svg element not in render tree error Apr 5, 2023
@luin
Copy link
Contributor Author

luin commented Apr 15, 2023

Looks like there are some duplications:

@easylogic
Copy link

hi @luin

graphDiv is container id.

But what goes into the render function is the id represented in the svg.
So it needs to be different from the container id.

If you follow the example below, you shouldn't get any errors.

const element = document.querySelector('#graphDiv');
      const {
        svg,
      } = await mermaid.render('graphSvg', graphDefinition, element);
      element.innerHTML = svg;

@luin
Copy link
Contributor Author

luin commented May 1, 2023

@easylogic Thanks for the update. However, I still get the same error with your change.

@luin luin mentioned this issue May 29, 2023
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix exceptions for empty lines
2 participants
@easylogic @luin