Syntax error in text mermaid version 10.9.0

[dariuszwojtowicz]

Description

When I try to render diagrams with Mermaid version 10 or above I always get this error instead of diagram
"Syntax error in text
mermaid version 10.9.0"

I tried many different diagrams and all of them work with version 9.0.0, but none works with 10 or higher.

This is my React Component with hardcoded Mermaid code.

import * as React from 'react';
import mermaid from 'mermaid';


mermaid.initialize({
  startOnLoad: true,
  securityLevel: 'loose',
  fontFamily: 'monospace',
  fontSize: 14,
});

export const MermaidDiagram: React.FC = ({children}) => {
  React.useEffect(() => {
    mermaid.contentLoaded();
  }, []);

  const diagram = `pie title NETFLIX
  "Time spent looking for movie" : 90
  "Time spent watching it" : 10
`;

  return <code className="mermaid">{diagram}</code>;
};

Steps to reproduce

1. With Mermaid 10 or above, render any diagram code which works well with v9.0.0
2. No diagram is rendered, instead I see this error "Syntax error in text mermaid version 10.9.0" rendered.

Screenshots

Code Sample

No response

Setup

• Mermaid version: 10.9.0
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response

[niclinn]

What was the fix?