can't get mermaid to work

[damaltor]

Hi! I made mscgen, plantuml and graphviz work after installing the respective packages on the server, that was pretty easy and works perfectly. i am absolutely unable to get mermaid to reder though, for some reason. obviously the extension finds the mermaid tags, as the mermaid source code is wrapped into an invisible div, which is the normal way for mermaid to work as far as i know. then the mermaid javascript should be called to render a graphic in that place, but that does not happen. when i view the source of the wiki page, i cannot see any call of the mermaid scripts, or even find the place where the mermaid script file is included. am i missing something to make mermaid work? is there a trick i did not see? i do not get any error message, but no mermaid diagram either. the wiki is on a company-internal network which has restricted internet access - can that be the problem?

[samwilson]

Are there any errors in the browser console? It sounds like perhaps there's some odd JavaScript caching going on. You could try clearing your browser cache, or using the ?debug=1 URL param to debug the resource loader.

Not having outside internet access shouldn't be a concern — nothing is loaded from anywhere other than the local wiki.

[damaltor]

in the console, i can see this:

Exception in module-execute in module ext.diagrams.mermaid: [load.php:150:8](https://****/load.php?debug=1&lang=de&modules=startup&only=scripts&raw=1&skin=metrolook)
TypeError: mermaid.mermaidAPI is undefined

[damaltor]

After some more investiation, it seems like the mermaid file is not being served. in the console there is a 404 error: Source-Map-Fehler: Error: request failed with status 404 Ressourcen-Adresse: https://****/load.php?debug=1&lang=de&modules=ext.diagrams.mermaid%7Cjquery%2Csite%7Cjquery.client%2Ccookie%2CtextSelection%2Cthrottle-debounce%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Ctoc%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cmediawiki.page.watch.ajax%7Cskins.metrolook.collapsibleNav%2Cjs%7Cuser.defaults&skin=metrolook&version=goqt8 Source-Map-Adresse: mermaid.min.js.map if i click that url in the error message though, the javascript file immediately gets loaded by the browser in a new tab. weird.

[samwilson]

That is strange! Does it happen with every skin? With the 404 is there any response data? I'm trying to replicate this locally, but no luck so far.

[damaltor]

thanks for your time. i am still looking into it. i am not sure if the 404 is from the js file or from the map file, anyways the mairmaid api is undefined so i guess that the js file is not getting loaded somehow. funny enough it loads fine when i click the exact link shown in the error message on the console. edit: reading the error again, it starts with "source-map-error" so it might be the map that is not found, not the js itself, but then it should work :D

[samwilson]

Yes, not finding the map shouldn't matter should it? That should only be of use when debugging anyway, and not served in production. Does the JS even have sourceMappingURL in it when not using debug=1? It shouldn't. Maybe it's somehow in debug mode at other times? Do you have $wgResourceLoaderDebug in LocalSettings.php?

[damaltor]

i'll try without debug - am in a meeting now. i will keep you updated.

[damaltor]

Without the debug, the 404 is gone. I guess it was the map file that was not found then. Here you can see all output. Could it be that the deprecated loader interferes? https://i.postimg.cc/DwJjkCnj/mermaid.png

[samwilson]

What version of MediaWiki are you using?

This error is from the following usage in resources/mermaid.js, so I assume the require() is failing:

const mermaid = require( './foreign/mermaid/mermaid.min.js' );
mermaid.mermaidAPI.initialize( { startOnLoad: false } );

Would you be able to put a console.log( mermaid ); in between those two lines, to see what's actually in there?

[damaltor]

I am using 1.37.1. The console log now drops an object in the debug console: https://i.postimg.cc/4NrbDVws/mermaid2.png

[damaltor]

Also, i tried replacing the minified js file with the unminified (by renaming the unminified file to mermaid.min.js and placing it at the place the minified file was). this did only produce an error for a missing ")", so did not help at all :) other than that, the file obviously gets read - if i remove it or put errors in it, the error message reflects that. still, mermaid.mermaidAPI is invalid when being called.

i noticed something else interesting: while the error message clearly states that mermaidAPI is undefined, and mermaidAPI also does not show up in the object dumped into the log, i can see mermaidAPI when i put "mermaid" in the watch list in the debugger. it seems to be only undefined directly after being called. great fun.