error while loading mathjax in react with vite

[DineshGanesan1]

Hi,

We are building a react app with vite and we have some formula's to render in the page using mathjax , when we try to load the component we get below error , need assistance here

[dpvc]

There is insufficient information here to determine the cause of your issue. Please fill out the complete issue template rather than deleting it. In particular, the MathJax configuration you are using may be at issue, as well as the method you are using to load MathJax into your application. If this occurs only when a particular expression is in the page, it would help to know that expression as well. Without this information, there is little we can do to help.

[DineshGanesan1]

find below information

Issue Summary

A summary of the issue and the browser/OS environment in which it occurs. If
suitable, include the steps required to reproduce the bug.

got the below console error on loading the react component which has the math equations & formula's browser : chrome , OS - window

Steps to Reproduce:

1. using a react project scaffolded with vite configuration
2. We have a html file loaded from cms dynamically
3. use html-react-parser to load the html from the cms
4. In the index.html the below configuration for loading the math Jax library

tried configuration1 :

 <script>
      MathJax = {
        tex: {
          inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
            ["\ (", "\ )"],
          ],
        },
        svg: {
          fontCache: "global",
        },
      };
    </script>
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script
      id="MathJax-script"
      async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
    ></script>

tried configuration 2 : added the typesetPromise for the root element

 <script>
      MathJax = {
        tex: {
          inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
            ["\ (", "\ )"],
          ],
        },
        svg: {
          fontCache: "global",
        },
      };
 MathJax.typesetPromise(document.getElementById('root'))

    </script>
   

 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script
      id="MathJax-script"
      async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
    ></script>

Technical details:

• MathJax Version: 3.2
• Client OS: (windows 10)
• Browser: (Version 123.0.6312.123 (Official Build) (64-bit))

I am using the following MathJax configuration:

MathJax = {
...
};

and loading MathJax via

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Supporting information:

[dpvc]

Since you are loading the math content dynamically, you will need to tell MathJax to process the new content when it is in place using MathJax.typesetPromie() (see the documentation from more details).

I see you are trying to do this, but in your second configuration, you have MathJax.typesetPromis() in the wrong location. your configuration should show an error in the console window, as at that point, the MathJax variable contains only your configuration, and MathJax itself (which test up typesetPromise() has not bee loaded yet. You need to put the typesetPromise() call into your code so that it runs after the dynamic content has been loaded. I don't have access to your code, so can't tell you where that needs to be put, so that is something you will have to determine.

React maintains its on virtual DOM, so you may run into trouble having MathJax update the DOM outside of React's control. There are a number of MathJax-in-React packages (e.g., better-react-mathjax or mathjax3-react). Perhaps one of these can be used (for example, it looks like mathjax3-react might be able to take your dynamic content directly without the need for html-react-parser (it does seem to use vite).

As an aside, I'm not sure I understand your inlineMath configuration. Do you really mean to have a space followed by an open parenthesis be an open delimiter for math, and a space followed by a close parentheses be a close delimiter? That seems rather strange. So the text this is math (x+y ) inline" would typeset the "x+y" as math (but put it right up against "math" in the sentence)? The backslashes in '["\ (", "\ )"] are doing nothing (the \ becomes just a space in the string, so is basically ignored).

[DineshGanesan1]

@dpvc thanks for your suggestion actually it did work as per your suggestion above , i had to move the MathJax.typesetPromis() into the react useeffect where we load the dynamic html instead of the root html of the app closing this issue