Skip to content

Possible compatibility issue (.Net 6, Mermaid.JS 9.2.2, MermaidJS.Blazor, Visual Studio 2022) #15

@NJ-Brad

Description

@NJ-Brad

I'm not sure where the issue is and I can certainly understand if this gets closed.

I was trying to leverage the newly added C4 diagrams in Mermaid.JS. This is still experimental, but works on mermaid.live and when I create an HTML page hosting the diagram.
I downloaded the source code for MermaidJS.Blazor, switched to .Net 6 from .Net 5 as the target and updated the mermaid library version in libman.json "library": "mermaid@9.2.2",
then I refreshed the client-side code for mermaid and built the project
I switched my Blazor project to use the local copy of the component, instead of the NuGet package
When I tested my modified library for most Mermaid diagrams, everything worked great. When I tested using one of the new C4 diagrams, I get an error "Bind is not a function"
image

I also get a second copy of the image that gets added to the bottom of the page.
image

I reproduced the issue in a simple WASM PWA project, using the default Index.razor page from the demo that is included in the source code.
image

I see lots of places where this could be having an issue. Mermaid.JS having an issue that isn't visible in other environments. MermaidJS.Blazor not being quite compatible with the latest Mermaid.JS. Version differences between .Net 5 and .Net 6 that are causing the issue. User error on my part when building.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions