Symfony version(s) affected

6.4.0

Description

Using the AssetMapper component, I have everything up and running in my project, except getting MermaidJs to run.

Mermaid itself is installed, but it then dynamically loads in a .js file specific to the type of chart it is trying to render.

In my case, it's looking for /npm/[email protected]/dist/ganttDiagram-db6931fb.js/+esm and this is returning a 404 and the diagram does not get displayed.

How to reproduce

bin/console importmap:require mermaid

I am trying to load Mermaid from a Stimulus controller, but I don't think this is the cause of the problem.

import { Controller } from '@hotwired/stimulus';
import mermaid from 'mermaid';

export default class extends Controller {
    async connect() {
        mermaid.initialize({
            startOnLoad: false,
            securityLevel: 'loose',
            theme: 'base',
            themeVariables: {
                primaryColor: '#ffc107',
            }
        });

        await mermaid.run({
            querySelector: '.mermaid',
        });
    }
}

Mermaid then loads, detects in my HTML that it's a Gantt chart, and then tries to load /npm/[email protected]/dist/ganttDiagram-db6931fb.js/+esm which of course isn't present.

I've tried installing that specifically, but it seems the URL versioning breaks this, as of course the Gantt chart JS file is under a different name once it's installed.

This, and variations of this, do not help:

bin/console importmap:require mermaid/dist/ganttDiagram-db6931fb

How can the asset mapper system handle this? It is even possible?

Possible Solution

How do

Additional Context

No response