“Syntax error in textmermaid version 11.4.0” when using mermaid.render

Im getting this render error when using mermaid.render. Note that the render size is capped too.

The code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="main.js"></script>
    
    <pre id="my-diagram" class="mermaid"></pre>
</body>
</html>

main.js

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';

mermaid.initialize({ startOnLoad: false });

var target = document.getElementById('my-diagram')
const graphDefinition = 'graph TBna-->b';

mermaid.render('my-diagram', graphDefinition, target);

this is an error i encapsulated in this example, but i had it in a Angular Project and there i can render a diagram simply using a element, but it only renders using the inner html of it.