Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
GRASBOCK opened this issue May 11, 2024 · 2 comments · Fixed by #5517
Closed

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

GRASBOCK opened this issue May 11, 2024 · 2 comments · Fixed by #5517
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@GRASBOCK
Copy link
Contributor

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
@GRASBOCK GRASBOCK added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels May 11, 2024
@sidharthv96
Copy link
Member

sidharthv96 commented May 12, 2024 •
edited

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);

@GRASBOCK GRASBOCK mentioned this issue May 13, 2024
Merged
4 tasks
@GRASBOCK
Copy link
Contributor Author

GRASBOCK commented May 13, 2024 •
edited

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

@GRASBOCK GRASBOCK mentioned this issue May 13, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update flowchart.md GRASBOCK/mermaid
2 participants
@sidharthv96 @GRASBOCK