Mermaid flowcharts throws JavaScript error ('h.at' is undefined) #6427
Description
-
Searched existing issues to avoid creating duplicates.
-
Confirmed that it can be reproduced in built-in themes without customized css.
If it only exists in 3rd party themes or css, you can still report it, but please attach the theme target or the css file. We may not "fix" it, if it is caused by 3rd party themes or css styles that we cannot support.
-
Searched http://support.typora.io/
Describe the bug
Mermaid 11.9.0, which is used by Typora 1.12.1, requires JavaScript support for the Array.prototype.at method. This is a reasonably-recent requirement, which should be available on Node.js 16.6 (or Deno 1.12, I don't know what Typora is using; I'm assuming it's Electron 35 (as per #6312), and, in that case, anything since September 2021 should work).
Otherwise, any flowchart will bomb out with the following error:
ERROR: [Mermaid] h.at is not a function. (In 'h.at(-1)', 'h.at' is undefined)
Note that most of the Mermaid types will work flawlessly, even some experimental types such as C4 and treemaps and many others I've tried (except for architecture-beta, which I'm aware it's still unsupported, as per issue #6143).
This is, for me, a bit baffling. Even if Typora is relying on the 'natively' available version of Node.js, I've got v20.18.1 installed from MacPorts. But I'm assuming that Electron bundles its own version1
To Reproduce
Just drop the following code for a simple Mermaid Flowchart on a file:
```mermaid
flowchart TD
A[Request new task] --> B{Check last 3 task times}
B -->|All > 72h| C[Eligible]
B -->|Some < 72h| D[Wait until oldest is >72h]
C --> E{Check 15-day average}
E -->| ≥ 4.0 | F[Limit: 3 tasks / 24h]
E -->| < 4.0 | G[Limit: 3 tasks / 72h]
D --> A
F --> A
G --> A
```
Alternatively, you can try any of the 'official' examples from Mermaid.
I haven't checked if there is an "official test suite" for Mermaid compliance, but those examples should suffice.
Expected behaviour
I expected this:
flowchart TD
A[Request new task] --> B{Check last 3 task times}
B -->|All > 72h| C[Eligible]
B -->|Some < 72h| D[Wait until oldest is >72h]
C --> E{Check 15-day average}
E -->| ≥ 4.0 | F[Limit: 3 tasks / 24h]
E -->| < 4.0 | G[Limit: 3 tasks / 72h]
D --> A
F --> A
G --> A
😁
Screenshots / Screencasts
I got this instead:
Sample Markdown File
See above. It's really just as simple as copying & pasting the code for that flowchart. No need to add anything else beyond the code-fenced block.
Desktop (please complete the following information):
macOS Big Sur 11.7.10
Extra packages (such as pandoc 3.8 with Lua 5.4) are provided via MacPorts (2.11.5)
Typora Version
Version 1.12.1 (7516)
Additional context
I'm actually adding this issue because I find it strange that nobody has reported it yet 😁
This leads me to believe that this issue may be limited to my own particular setup, which does have its quirks (It's a very old Mac!), so I'd appreciate any suggestions for me to try out.
Note that:
- No other Mermaid-rendering tool I regularly use on my Desktop (aye, I have many) has any issue rendering flowcharts (simple or complex ones)
- I have no other themes installed beyond the original ones (I mean, one of the reasons I paid for Typora was because you guys support the Nord theme — really, I'm not joking!), and the error is present on all of them
- To the best of my knowledge, none of the other tools or functionality in Typora has any quirk whatsoever (and that includes the LaTeX support, among other goodies), although I admit I haven't tested them all
- I did not test all possible Mermaid charts & graphs, with all possible options and configurations — it's certainly possible that the same error is present in some of the others as well. But
flowchartgives errors even with an empty chart, or a chart with a single item — it's impossible to miss! - Assuming that, for some obscure reason, you're unable to tweak the code relying upon the existence of
Array.prototype.at. That's OK — from the MDN page, you can see there are a few polyfills to emulate most of its behaviour. Please at least consider a small check to see if.at()exists, and, if not, to call one of the polyfills instead. That would be a quick fix for everybody who might have this issue for some reason. - Last but not least: Mermaid 11.9.0, although reasonably recent, suffers from at least one major security vulnerability, and it's strongly recommended to use at least 11.10.0. This might be a non-issue if/when you do the Electron upgrade to 38+, because I'm also assuming that this will bump up all the other library versions up a few versions as well (namely, Node.js will have to get bumped at least to v22.18). It might very well be the case that this will fix everything.
Footnotes
-
Sorry for my ignorance, but I'm not an advanced programmer, and using Electron is totally beyond my knowledge; feel free to ignore anything that is irrelevant/inaccurate in those comments! ↩