MathJax not always rendering.

[alexzhang13]

Have you checked that your issue isn't already filed?

• I read through FAQ and searched through the past issues, none of which addressed my issue.
• Yes, I have checked that this issue isn't already filed.

Bug description

MathJax does not render after refreshing the page once. There is a JS error.

How to reproduce the bug

I'm not sure what's unique about my distill page in particular, but if you visit https://alexzhang13.github.io/blog/2024/annotated-kan/ and refresh the page, the MathJax won't render anymore. When I render the default distill page, this isn't an issue.

Error messages and logs

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'replaceChild')
    at e.replace (tex-mml-chtml.min.js:5:6799)
    at e.updateDocument (tex-mml-chtml.min.js:5:192956)
    at t.updateDocument (tex-mml-chtml.min.js:5:41366)
    at e.updateDocument (tex-mml-chtml.min.js:5:185993)
    at e.updateDocument (tex-mml-chtml.min.js:5:699183)
    at Object.renderDoc (tex-mml-chtml.min.js:5:34972)
    at e.renderDoc (tex-mml-chtml.min.js:5:35195)
    at t.render (tex-mml-chtml.min.js:5:38146)
    at tex-mml-chtml.min.js:5:22264
    at e (tex-mml-chtml.min.js:5:727971)

What operating system are you using?

Mac

Where are you seeing the problem on?

Deployed site

More info

This issue also occurs on the local website as well -- it isn't a deployed site exclusive issue.

[george-gca]

This is indeed weird. Try to move mathjax import to after the distill, see if that helps. If not, move to after the distill and remove defer from it.

[orm011]

I've run into this as well. It happens non-deterministically.
On the occasion it has happened, I noticed the following console error message indicating a problem verifying the checksum... I'm not sure why it succeeds sometimes.

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-mml-chtml.min.js' with computed SHA-256 integrity 'YyRhy+F3bG+zvvwsW1E/uy5s5pKXwmG/bOPlV+1pt6o='. The resource has been blocked

I am working around this by removing the integrity= attribute in _includes/scripts/mathjax.liquid,
seems like one can also just add the script tag to the page itself.

[alexzhang13]

@orm011 Yeah this is also how I got around it temporarily. Actually, the original error above had to do with trying to use colors in MathJax, which for some reason it doesn't really like. I then ran into the issue you described.

I'm not really proficient in web-dev so I don't know the dangers of not including the integrity attribute, but for now it seems fine.

[george-gca]

Can you guys test if d019fc0 fixes this? I made a mistake when using mathjax dependencies.

[orm011]

I tried your fixes and they seem to work.