Giters

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Home Page:https://mermaid.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flowchart interaction docs fail: o[n] is not a function

GRASBOCK opened this issue · comments

commented

Description

When I want to execute the jsfiddle on flowchart interaction, but when I press on Node A or C (which use the callback function), the script fails with the error (browser devtools console error):

Uncaught TypeError: m[v] is not a function
    DCe https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:10
    CDe https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:101
    CDe https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:101
    FNt https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:101
    FNt https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:101
    LMe https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:85
    oNt https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:85
    uNt https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:85
    EventListener.handleEvent* https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:87
    <anonymous> https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:1
    <anonymous> https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js:1
mermaid.min.js:10:469

Not just in the jsfiddle, also locally when taking the example from the docs and adding the mermaid import:

<body>
    <pre class="mermaid">
      flowchart LR
          A-->B
          click A callback "Tooltip"
          click B call callback() "Tooltip"
    </pre>
  
    <script type="module">
      const callback = function () {
        alert('A callback was triggered');
      };
      const config = {
        startOnLoad: true,
        flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
        securityLevel: 'loose',
      };
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize(config);
    </script>
</body>

which in the browser gives following console error:

Uncaught TypeError: o[n] is not a function
    T0 https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:5590
    Ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:875
    Ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:872
    ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:893
    ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:892
    r1 https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7897
    ih https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7864
    nh https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7917
    EventListener.handleEvent* https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7924
mermaid-00886c59.js:5590:7
    T0 https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:5590
    Ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:875
    (Async: EventListener.handleEvent)
    Ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:872
    ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:893
    forEach self-hosted:203
    ue https://cdn.jsdelivr.net/npm/mermaid@10/dist/flowDb-c7526231.js:892
    r1 https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7897
    InterpretGeneratorResume self-hosted:1465
    AsyncFunctionNext self-hosted:852
    (Async: async)
    ih https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7864
    nh https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7917
    (Async: EventListener.handleEvent)
    <anonymous> https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid-00886c59.js:7924

The nodes are the most

Steps to reproduce

  1. Go to jsfiddle
  2. Press on node A or C
  3. Check the console output or dev tools for the error "Script error." or in devtoolsUncaught TypeError: m[v] is not a function`

Screenshots

image

image

Code Sample

https://jsfiddle.net/Ogglas/2o73vdez/7

Setup

  • Mermaid version: The one of the jsfiddle at the time of writing
  • Browser: Firefox 125.0.2 (64-bit)

Suggested Solutions

No response

Additional Context

No response

commented

The function needs to be attached to window object.

- const callback = function () {
+ window.callback = function () {
      alert('A callback was triggered');
};
const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
};
mermaid.initialize(config);
commented

Thanks! That works.
I made the change in the jsfiddle here and a pull request #5517