Integrating MathJax into Blazor SSR
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.9k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Issue Summary
I'm trying to integrate MathJax into Blazor SSR. Blazor SSR has a feature called enhanced loading, it intercepts clicks on links, loads HTML in the background, and replaces all different elements. This hides page reload quite well. However brings issues to libraries which need to initialize itself on each page.
Blazor has a callback which can be used like so:
Blazor.addEventListener("enhancedload", function () {
MathJax.typesetPromise().then(() => {
MathJax.typesetClear();
MathJax.typesetPromise();
}).catch((err) => console.log(err.message));
});
This works very well for 1 page with math and many non math pages. However, if I open 2 pages with math, I start to get this kind of errors:
MathJax: can't insert css rule 'mjx-c.mjx-c1D47B.TEX-BI::before {
padding: 0.67em 0.772em 0 0;
content: "T"; }': Cannot read properties of null (reading 'insertRule')
e.insertRules @ tex-chtml.js:1
e.styleSheet @ tex-chtml.js:1
e.documentStyleSheet @ tex-chtml.js:1
e.addStyleSheet @ tex-chtml.js:1
e.updateDocument @ tex-chtml.js:1
e.updateDocument @ tex-chtml.js:1
(anonymous) @ tex-chtml.js:1
e.renderDoc @ tex-chtml.js:1
t.render @ tex-chtml.js:1
(anonymous) @ tex-chtml.js:1
e @ tex-chtml.js:1
(anonymous) @ tex-chtml.js:1
Promise.then (async)
e @ tex-chtml.js:1
e.handleRetriesFor @ tex-chtml.js:1
e.MathJax.typesetPromise @ tex-chtml.js:1
eval @ index.js:47
dispatchEvent @ blazor.web.js:1
documentUpdated @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
write @ blazor.web.js:1
Do you have any ideas how to debug this further? I have a feeling that MathJax creates styles and doesn't clean them, or changes a state and doesn't clean it even though I call typesetClear().
Steps to Reproduce:
- Open page with math (it's displayed fine)
- Open another page (without reload) with math - math is not rendered correctly, and there are errors in console
Technical details:
I'm loading MathJax with code from documentation:
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
Browser is chrome, Mac OS X
Don't have any configuration.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the two-page navigation flow in Chrome with the MathJax CDN script and the enhancedload handler shown in the issue. Inspect the callback at index.js:47 and the MathJax stack around tex-chtml.js, especially the typesetPromise and typesetClear sequence. Done means math renders correctly on the second page without the insertRule console error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100