I have a Markdown Editor component for Blazor. In this component, I use an old version of Mermaid to display graphs.
I added the Mermaid library using this script
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>Unfortunately, this version raises an error
e.replace is not a function
So, I tried to replace this script with
<script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });</script>In this case, I don't have an error but the graph is not rendered because when I check if
if (typeof mermaid !== 'undefined') { // code}is always false. So, I tried to add the code abode in the JavaScript script like
import { mermaid } from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';mermaid.initialize({ startOnLoad: true});// rest of the scriptbut in this case, the error is
Unhandled exception rendering component: Could not find 'initialize' ('initialize' was undefined).
Error: Could not find 'initialize' ('initialize' was undefined).
So, my questions are:
- how can I add the
importin my script and call theinitializefunction - how can I check if
mermaidis available