Mermaid-PHP icon indicating copy to clipboard operation
Mermaid-PHP copied to clipboard

[Fix] mermaid is not defined

Open bumbummen99 opened this issue 4 months ago • 1 comments

Currently when using Composer-Graph by following it's readme i do receive the following error message: Uncaught ReferenceError: mermaid is not defined

This is due to multiple reasons:

  • Mermaid is loaded using ESM import which is an asynchronous operation

    Scripts without async, [defer] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer) or type="module" attributes, as well as inline scripts without the type="module" attribute, are fetched and executed immediately before the browser continues to parse the page.

    See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes

  • The mermaid identifier is only available in the script block it has been imported in

  • mermaid.initialize() is called before mermaid is either loaded or available

This pull request will solve this issue with Mermaid-PHP and Composer-Graph by binding mermaid to the global scope (window), emit a event and initialize only after said event has been emitted.

bumbummen99 avatar Mar 04 '24 10:03 bumbummen99