- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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.
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
Refreshing page will show Syntax error in mermaid graph sometimes #3232
Comments
Thanks for reporting! It's not reproducible for me in Chrome but in Firefox. |
The semantics of |
Thanks for the quick response @squidfunk . I've tested earlier with prior versions to the aforementioned MR of mkdocs-material locally, which brings older version of MermaidJS too. Same problem. Still no clue what is the root cause. |
The problem is that the moment Mermaid.js is loaded it will immediately try and parse all elements with the |
Potential fix in |
I've actually never seen this issue. I am not currently using Material's solution yet, but I've never had to strip off the class and add it back. I never see the syntax error. I've tried refreshing a bunch in my own docs... |
I guess I can't reproduce it in the official docs either... 🤷🏻 |
I take it back. I can reproduce it in Firefox, but only with Material's solution. So I must be doing something different in my solution than what Material is doing. I do not have to strip out |
Yes, it's related to the usage of |
That's weird as I am also using |
How are you initializing/loading Mermaid? |
I don't think Mermaid runs async, but I do it the same way as I do MathJax which does use async 🤷🏻 :
I don't know how much any of this info will help, but maybe there is something that stands out. |
Thanks for the fix. It works perfectly for me now! Removing & adding back the class selector does seem a bit hacky but shouldn't be a problem as I see it. |
@facelessuser I guess the problem lies within the fact that Material will automatically include Mermaid.js when it sees an element tagged with a A better approach would be to patch Mermaid to not run automatically, but since it is so widely used and it would be a breaking change, I'd suspect that it would be too hard to convince the author to do so. |
Ah, makes sense. |
The fix was just released as part of 7.3.6-insiders-3.2.3. |
@Guts You are welcome. Glad it helped! |
Thanks for this discussion--it helped us diagnose a similar issue on the Kubernetes website. 🙇🏻 |
squidfunk/mkdocs-material#3232 this issue was guidance to root case. Turn off nav.instant and js load order comeback to normal
Contribution guidelines
I've found a bug and checked that ...
mkdocs
orreadthedocs
themescustom_dir
,extra_javascript
andextra_css
Description
Refreshing page will show Syntax error in mermaid graph sometimes. This shows in the Official Docs for me. Also, using mkdocs serve/build reproduces the same bug.
Expected behaviour
Always show the correctly rendered MermaidJS graph.
Actual behaviour
Sometimes normal, while sometimes not.
Refreshing page but with cache disabled can solve this problem...
Steps to reproduce
Just keep refreshing the page.
Package versions
Doesn't matter.
Configuration
Doesn't matter.
System information
The text was updated successfully, but these errors were encountered: