javascript parameter seems not to work with default configuration #87

volphy · 2023-09-01T13:18:58Z

volphy
Sep 1, 2023

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?

Answered by volphy

Oct 31, 2023

It turned out that 'mermaid.min.js' has not been added to the git repository.

Now it works.

Blame it on my error (human error).

View full answer

fralau · 2023-09-01T13:48:20Z

fralau
Sep 1, 2023
Maintainer

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?

0 replies

volphy · 2023-09-01T14:07:59Z

volphy
Sep 1, 2023
Author

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

0 replies

fralau · 2023-09-01T16:31:20Z

fralau
Sep 1, 2023
Maintainer

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

0 replies

volphy · 2023-09-01T19:41:13Z

volphy
Sep 1, 2023
Author

I have already provided this call (using cURL syntax) in the previous comment:
#86 (comment)

0 replies

fralau · 2023-09-02T04:52:09Z

fralau
Sep 2, 2023
Maintainer

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.

0 replies

fralau · 2023-09-26T09:19:09Z

fralau
Sep 26, 2023
Maintainer

See new version 1.1.1, in case that solves your issue?

1 reply

volphy Oct 31, 2023
Author

I have upgraded mkdocs-mermaid2-plugin to 1.1.1 (other module versions unchanged) and I receive the following error at the build stage:

$ mkdocs --version
mkdocs, version 1.5.0 from /usr/local/lib/python3.11/site-packages/mkdocs (Python 3.11)
$ mkdocs build -v
DEBUG   -  Loading configuration file: /builds/emeia/eac/access-platform/access-api-doc/mkdocs.yml
DEBUG   -  Loading configuration file: /builds/emeia/eac/access-platform/access-api-doc/mkdocs.yaml
DEBUG   -  Loaded theme configuration for 'material' from '/usr/local/lib/python3.11/site-packages/material/mkdocs_theme.yml': {'language': 'en', 'direction': None, 'features': [], 'font': {'text': 'Roboto', 'code': 'Roboto Mono'}, 'icon': None, 'favicon': 'assets/images/favicon.png', 'static_templates': ['404.html']}
DEBUG   -  Config value 'config_file_path' = '/builds/emeia/eac/access-platform/access-api-doc/mkdocs.yaml'
DEBUG   -  Config value 'site_name' = 'Incedo Cloud API Documentation'
DEBUG   -  Config value 'nav' = None
DEBUG   -  Config value 'pages' = None
DEBUG   -  Config value 'exclude_docs' = <pathspec.gitignore.GitIgnoreSpec object at 0x7f782bf2f210>
DEBUG   -  Config value 'not_in_nav' = None
DEBUG   -  Config value 'site_url' = None
DEBUG   -  Config value 'site_description' = None
DEBUG   -  Config value 'site_author' = None
DEBUG   -  Config value 'theme' = Theme(name='material', dirs=['/usr/local/lib/python3.11/site-packages/material', '/usr/local/lib/python3.11/site-packages/mkdocs/templates'], static_templates={'404.html', 'sitemap.xml'}, name='material', locale=Locale(language='en', territory=''), language='en', direction=None, features=['content.code.copy', 'content.code.select'], font={'code': 'Roboto Mono', 'text': 'assa_vestalight'}, icon=None, favicon='assets/images/favicon.png', logo='assets/ASSAABLOY_logo.png')
DEBUG   -  Config value 'docs_dir' = '/builds/emeia/eac/access-platform/access-api-doc/docs'
DEBUG   -  Config value 'site_dir' = '/builds/emeia/eac/access-platform/access-api-doc/site'
DEBUG   -  Config value 'copyright' = '© 2023 ASSA ABLOY AB. All rights reserved.'
DEBUG   -  Config value 'google_analytics' = None
DEBUG   -  Config value 'dev_addr' = _IpAddressValue(host='127.0.0.1', port=8000)
DEBUG   -  Config value 'use_directory_urls' = True
DEBUG   -  Config value 'repo_url' = None
DEBUG   -  Config value 'repo_name' = None
DEBUG   -  Config value 'edit_uri_template' = None
DEBUG   -  Config value 'edit_uri' = None
DEBUG   -  Config value 'extra_css' = ['stylesheets/extra.css']
DEBUG   -  Config value 'extra_javascript' = []
DEBUG   -  Config value 'extra_templates' = []
DEBUG   -  Config value 'markdown_extensions' = ['toc', 'tables', 'fenced_code', 'pymdownx.highlight', 'pymdownx.inlinehilite', 'pymdownx.snippets', 'pymdownx.superfences']
DEBUG   -  Config value 'mdx_configs' = {'pymdownx.highlight': {'anchor_linenums': True, 'line_spans': '__span', 'pygments_lang_class': True}, 'pymdownx.snippets': {'check_paths': True}, 'pymdownx.superfences': {'custom_fences': [{'name': 'mermaid', 'class': 'mermaid', 'format': <function fence_mermaid at 0x7f782b40b880>}]}}
DEBUG   -  Config value 'strict' = False
DEBUG   -  Config value 'remote_branch' = 'gh-pages'
DEBUG   -  Config value 'remote_name' = 'origin'
DEBUG   -  Config value 'extra' = {'generator': False}
DEBUG   -  Config value 'plugins' = {'mermaid2': <mermaid2.plugin.MarkdownMermaidPlugin object at 0x7f782b460dd0>}
DEBUG   -  Config value 'hooks' = {}
DEBUG   -  Config value 'watch' = []
DEBUG   -  Config value 'validation' = {'nav': {'omitted_files': 20, 'not_found': 30, 'absolute_links': 20}, 'links': {'not_found': 30, 'absolute_links': 20, 'unrecognized_links': 20}}
DEBUG   -  Running 1 `config` events
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: /builds/emeia/eac/access-platform/access-api-doc/site
DEBUG   -  Reading markdown pages.
DEBUG   -  Reading: index.md
DEBUG   -  Reading: access_platform_api.md
DEBUG   -  Reading: authentication.md
DEBUG   -  Reading: glossary.md
DEBUG   -  Reading: limits.md
DEBUG   -  Reading: resources.md
DEBUG   -  Copying static assets.
DEBUG   -  Copying media file: 'assets/ASSAABLOY_logo.png'
DEBUG   -  Copying media file: 'stylesheets/extra.css'
DEBUG   -  Copying media file: 'stylesheets/ASSA_Vesta_Woff_format_Webfonts/AAVESBIT.woff'
DEBUG   -  Copying media file: 'stylesheets/ASSA_Vesta_Woff_format_Webfonts/AAVESBOL.woff'
DEBUG   -  Copying media file: 'stylesheets/ASSA_Vesta_Woff_format_Webfonts/AAVESITA.woff'
DEBUG   -  Copying media file: 'stylesheets/ASSA_Vesta_Woff_format_Webfonts/AAVESLGT.woff'
DEBUG   -  Copying media file: 'stylesheets/ASSA_Vesta_Woff_format_Webfonts/AAVESLIT.woff'
DEBUG   -  Copying media file: 'stylesheets/ASSA_Vesta_Woff_format_Webfonts/AAVESREG.woff'
DEBUG   -  Copying media file: 'assets/images/favicon.png'
DEBUG   -  Copying media file: 'assets/javascripts/bundle.220ee61c.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/bundle.220ee61c.min.js.map'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.ar.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.da.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.de.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.du.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.es.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.fi.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.fr.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.hi.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.hu.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.hy.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.it.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.ja.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.jp.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.kn.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.ko.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.multi.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.nl.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.no.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.pt.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.ro.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.ru.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.sa.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.stemmer.support.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.sv.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.ta.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.te.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.th.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.tr.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.vi.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/min/lunr.zh.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/tinyseg.js'
DEBUG   -  Copying media file: 'assets/javascripts/lunr/wordcut.js'
DEBUG   -  Copying media file: 'assets/javascripts/workers/search.74e28a9f.min.js'
DEBUG   -  Copying media file: 'assets/javascripts/workers/search.74e28a9f.min.js.map'
DEBUG   -  Copying media file: 'assets/stylesheets/main.eebd395e.min.css'
DEBUG   -  Copying media file: 'assets/stylesheets/main.eebd395e.min.css.map'
DEBUG   -  Copying media file: 'assets/stylesheets/palette.ecc896b0.min.css'
DEBUG   -  Copying media file: 'assets/stylesheets/palette.ecc896b0.min.css.map'
DEBUG   -  Building theme template: 404.html
DEBUG   -  Building theme template: sitemap.xml
DEBUG   -  Gzipping template: sitemap.xml
DEBUG   -  Building markdown pages.
DEBUG   -  Building page index.md
DEBUG   -  Running 1 `post_page` events
DEBUG   -  Building page access_platform_api.md
DEBUG   -  Running 1 `post_page` events
INFO    -  MERMAID2  - Found superfences config: {'custom_fences': [{'name': 'mermaid', 'class': 'mermaid', 'format': <function fence_mermaid at 0x7f782b40b880>}]}
INFO    -  MERMAID2  - Page 'Access Platform API': found 2 diagrams, adding scripts
ERROR   -  Error building page 'access_platform_api.md': Cannot find Mermaid library: javascripts/mermaid/10.4.0/dist/mermaid.min.js
Traceback (most recent call last):
  File "/usr/local/bin/mkdocs", line 8, in <module>
    sys.exit(cli())
             ^^^^^
  File "/usr/local/lib/python3.11/site-packages/click/core.py", line 1157, in __call__
    return self.main(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/click/core.py", line 1078, in main
    rv = self.invoke(ctx)
         ^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/click/core.py", line 1434, in invoke
    return ctx.invoke(self.callback, **ctx.params)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/click/core.py", line 783, in invoke
    return __callback(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/mkdocs/__main__.py", line 286, in build_command
    build.build(cfg, dirty=not clean)
  File "/usr/local/lib/python3.11/site-packages/mkdocs/commands/build.py", line 349, in build
    _build_page(
  File "/usr/local/lib/python3.11/site-packages/mkdocs/commands/build.py", line 235, in _build_page
    output = config.plugins.on_post_page(output, page=page, config=config)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/mkdocs/plugins.py", line 586, in on_post_page
    return self.run_event('post_page', output, page=page, config=config)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/mkdocs/plugins.py", line 507, in run_event
    result = method(item, **kwargs)
             ^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/mermaid2/plugin.py", line 268, in on_post_page
    javascript = self.javascript.strip()
                 ^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/mermaid2/plugin.py", line 143, in javascript
    raise FileNotFoundError("Cannot find Mermaid library: %s" %
FileNotFoundError: Cannot find Mermaid library: javascripts/mermaid/10.4.0/dist/mermaid.min.js

It is even more interesting because build process succeeds in my local environment but it fails in my CICD pipeline. Looking into the firewall logs I cannot see any blocked calls to unpkg.com (or other blocked domains).

I am thinking hard what is incorrect in my setup.

volphy · 2023-10-31T13:42:51Z

volphy
Oct 31, 2023
Author

It turned out that 'mermaid.min.js' has not been added to the git repository.

Now it works.

Blame it on my error (human error).

1 reply

fralau Oct 31, 2023
Maintainer

Glad that it was solved for you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javascript parameter seems not to work with default configuration #87

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

javascript parameter seems not to work with default configuration #87

volphy Sep 1, 2023

Replies: 7 comments · 2 replies

fralau Sep 1, 2023 Maintainer

volphy Sep 1, 2023 Author

fralau Sep 1, 2023 Maintainer

volphy Sep 1, 2023 Author

fralau Sep 2, 2023 Maintainer

fralau Sep 26, 2023 Maintainer

volphy Oct 31, 2023 Author

volphy Oct 31, 2023 Author

fralau Oct 31, 2023 Maintainer

volphy
Sep 1, 2023

Replies: 7 comments 2 replies

fralau
Sep 1, 2023
Maintainer

volphy
Sep 1, 2023
Author

fralau
Sep 1, 2023
Maintainer

volphy
Sep 1, 2023
Author

fralau
Sep 2, 2023
Maintainer

fralau
Sep 26, 2023
Maintainer

volphy Oct 31, 2023
Author

volphy
Oct 31, 2023
Author

fralau Oct 31, 2023
Maintainer