Search code examples
javascripthtmljqueryundefinedmathjax

MathJax is not defined even though no async attribute

I am trying to run this html code and getting "amsciiTest.html:20 Uncaught ReferenceError: MathJax is not defined at amsciiTest.html:20" in the chrome devtools console. Similar questions have been resolved by removing the async attribute from the script tag for MathJax, however I didn't include the async attribute but MathJax is still undefined.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Math</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
    <!--<script src="https://vader-coder.github.io/asciimathml/ASCIIMathML.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/x-mathjax-config;executed=true">
        MathJax.Hub.Config({  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
     </script>
     <script type="text/javascript">
     //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        let output = '`H(s)=C\\frac{N(s)}{D(s)}`';
        //output = '[\\H(s)=C\\frac{N(s)}{D(s)}\\]';
        $(document).ready(function(){
            $('#works').html("jQuery Works");
            $('#eq').html(output);
        });
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        /*setTimeout(function () {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"])
        }, 2000);*/
    </script>
</head>
  <body>
    Equation:<br>
    `sum_(i=1)^n i^3=((n(n+1))/2)^2`<br>
    <p id='works'></p>
    <p id='eq'></p>
  </body>
</html>
Solution

  • If you use the CDN that is recommended in the MathJax documentation, your example will work. Use https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML instead of https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Math</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <!--<script src="https://vader-coder.github.io/asciimathml/ASCIIMathML.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/x-mathjax-config;executed=true">
        MathJax.Hub.Config({  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
     </script>
     <script type="text/javascript">
     //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        let output = '`H(s)=C\\frac{N(s)}{D(s)}`';
        //output = '[\\H(s)=C\\frac{N(s)}{D(s)}\\]';
        $(document).ready(function(){
            $('#works').html("jQuery Works");
            $('#eq').html(output);
        });
        console.log(typeof MathJax);
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        /*setTimeout(function () {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"])
        }, 2000);*/
    </script>
</head>
  <body>
    Equation:<br>
    `sum_(i=1)^n i^3=((n(n+1))/2)^2`<br>
    <p id='works'></p>
    <p id='eq'></p>
  </body>
</html>

    You can also register a callback for when it is fully loaded, which is more recommended, as MathJax should be loaded asynchronously, according to their documentation.

    <script type="text/x-mathjax-config">
    MathJax.Hub.Register.StartupHook("End",function () {
      console.log("Mathjax loaded");
      console.log(MathJax);
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
    });
</script>


    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Math</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
    <!--<script src="https://vader-coder.github.io/asciimathml/ASCIIMathML.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
        MathJax.Hub.Register.StartupHook("End",function () {
          console.log("Mathjax loaded");
          console.log(typeof MathJax);
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        });
     </script>
     <script type="text/javascript">
     //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        let output = '`H(s)=C\\frac{N(s)}{D(s)}`';
        //output = '[\\H(s)=C\\frac{N(s)}{D(s)}\\]';
        $(document).ready(function(){
            $('#works').html("jQuery Works");
            $('#eq').html(output);
        });
        
        /*setTimeout(function () {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"])
        }, 2000);*/
    </script>
</head>
  <body>
    Equation:<br>
    `sum_(i=1)^n i^3=((n(n+1))/2)^2`<br>
    <p id='works'></p>
    <p id='eq'></p>
  </body>
</html>