javascript parameter seems not to work with default configuration

[volphy]

My environment:

• OS: macOS Ventura 13.5.1
• Python: 3.11.5
• mkdocs: 1.5.2
• mkdocs-material: 9.1.21
• mkdocs-mermaid2-plugin: 1.1.0

My plugin configuration of my mkdocs.yaml file looks as follows:

plugins:
  - mermaid2:
      javascript: javascripts/mermaid/10.4.0/dist/mermaid.min.js

extra_javascript is not used in my configuration file.

Building HTML files using mkdocs works and no errors/warnings are emitted.

However, when I preview generated HTML files locally using IntelliJ IDEA & Google Chrome it mermaid diagrams are not rendered properly and the following error message is visible in Google Chrome Developer Tools:

Refused to execute script from 'http://localhost:63342/access-api-doc/site/authentication/javascripts/mermaid/10.4.0/dist/mermaid.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Am I missing something?

[fralau]

Judging by the port number, it seems you are using Pycharm's built-in web server or something similar?

Try to use mkdocs-serve instead, and see what happens?

Could you make a copy of the call to mermaid.js in the HTML page?

[volphy]

You are right. I use IntelliJ IDEA Ultimate (w/ Python plugins enabled).

Using `mkdocs-serve --clean --strict' generates the following logs to standard output:

INFO    -  Building documentation...
INFO    -  MERMAID2  - Initialization arguments: {}
INFO    -  MERMAID2  - Using specified javascript library: javascripts/mermaid/10.4.0/dist/mermaid.min.js
INFO    -  Cleaning site directory
INFO    -  Building documentation to directory: /var/folders/x0/xm8_m0x11d1d151zcj938g0m0000gn/T/mkdocs_bk81ygyy
INFO    -  MERMAID2  - Found superfences config: {'custom_fences': [{'name': 'mermaid', 'class': 'mermaid', 'format': <function fence_mermaid at 0x1043a8b80>}]}
INFO    -  MERMAID2  - Page 'Access Platform API': found 2 diagrams, adding scripts
INFO    -  MERMAID2  - Page 'Authentication': found 1 diagrams, adding scripts
INFO    -  Documentation built in 0.42 seconds
INFO    -  [16:04:13] Watching paths for changes: 'docs', 'mkdocs.yaml'
INFO    -  [16:04:13] Serving on http://127.0.0.1:8000/
WARNING -  [16:04:14] "GET /authentication/javascripts/mermaid/10.4.0/dist/mermaid.min.js HTTP/1.1" code 404
WARNING -  [16:04:14] "GET /authentication/javascripts/mermaid/10.4.0/dist/mermaid.min.js HTTP/1.1" code 404
INFO    -  [16:04:14] Browser connected: http://127.0.0.1:8000/authentication/
INFO    -  [16:04:14] Browser connected: http://127.0.0.1:8000/authentication/

As versioned mermaid.min.js I use the file copied from this CDN: https://cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js

cURL equivalent of the GET request that failed with 404 status looks as follows:

curl 'http://127.0.0.1:8000/authentication/javascripts/mermaid/10.4.0/dist/mermaid.min.js' \
  -H 'Accept: */*' \
  -H 'Accept-Language: en-GB,en-US;q=0.9,en;q=0.8' \
  -H 'Connection: keep-alive' \
  -H 'Referer: http://127.0.0.1:8000/authentication/' \
  -H 'Sec-Fetch-Dest: script' \
  -H 'Sec-Fetch-Mode: no-cors' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Chromium";v="116", "Not)A;Brand";v="24", "Google Chrome";v="116"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  --compressed

[fralau]

Thanks. Could you make a copy of the call to mermaid.js in the HTML page?

[volphy]

I have already provided this call (using cURL syntax) in the previous comment: https://github.com/fralau/mkdocs-mermaid2-plugin/issues/86#issuecomment-1702808068

[fralau]

Since the problem does not seem to be related to an issue in Mkdocs-Mermaid2, I am moving this to discussion.

My best advice is to follow the troubleshooting guide.