mathjax / mathjax/MathJax

Integrating MathJax into Blazor SSR

Open
#3,158 0 comments 0 reactions 0 assignees View on GitHub

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:
  1. Open page with math (it's displayed fine)
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.