MathJax.startup.defaultPageReady is not a function.

[Aljumaily]

Issue Summary

The following error is being generated:

Unhandled Promise Rejection: TypeError: MathJax.startup.defaultPageReady is not a function. (In 'MathJax.startup.defaultPageReady()', 'MathJax.startup.defaultPageReady' is undefined)

Until now, the LaTeX equations render properly. However, on a regular basis, I also get this error, which ruins all of the equations and renders Math output error:

[Error] TypeError: undefined is not an object (evaluating 'MathJax._.components')
8955 (tex.js:1:1062970)
L (tex.js:1:1064314)
(anonymous function) (tex.js:1:1064369)
(anonymous function) (tex.js:1:1065871)
Global Code (tex.js:1:1065874)

My issue is only encountered when the website is hosted on a server using Safari 17.5. I tested it on Opera 112.0.5197.30 (arm64) and the first error is never shown. On my local machine, both errors are never generated, using both browsers. Since I understand that my server is causing the issue when using Safari, I kindly ask what could I do to resolve the errors. I look forwarding to any suggestions!

Technical details:

• MathJax Version: 3.2
• Client OS: macOS Sonoma 14.5
• Browser: Safari Version 17.5 (19618.2.12.11.6) and Opera 112.0.5197.30 (arm64)

I am using the following MathJax configuration:

window.MathJax = {
  "tex": {
    "inlineMath": [
      [
        "\\(",
        "\\)"
      ]
    ],
    "tags": "none",
    "tagSide": "right",
    "tagIndent": ".8em",
    "packages": {
      "[+]": [
        "base",
        "extpfeil",
        "ams",
        "amscd",
        "color",
        "newcommand",
        "knowl"
      ]
    }
  },
  "options": {
    "ignoreHtmlClass": "tex2jax_ignore|ignore-math",
    "processHtmlClass": "process-math"
  },
  "chtml": {
    "scale": 0.98,
    "mtextInheritFont": true
  },
  "loader": {
    "load": [
      "input/asciimath",
      "[tex]/extpfeil",
      "[tex]/amscd",
      "[tex]/color",
      "[tex]/newcommand",
      "[pretext]/mathjaxknowl3.js"
    ],
    "paths": {
      "pretext": "_static/pretext/js/lib"
    }
  },
  "startup": {
    pageReady() {
      return MathJax.startup.defaultPageReady().then(function () {
      console.log("in ready function");
      rsMathReady();
      }
    )}
  }
};

and loading MathJax via

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

[dpvc]

I am not able to reproduce the problem. Is it possible that your page is loading MathJax twice? Or that the configuration script is after the script that loads tex-chtml.js? Either of those could lead to something like this. Since there is a difference between the server versus local usage, that suggests that the timing of when fils become available is affecting the situation, and that usually means the configuration is occurring in the wrong place. If the configuration is after the script that loads tex-chtml.js, then that configuration script will wipe out the MathJax object that was loaded by tex-chml.js (as it will be replaced by your configuration instead), and so MathJax._components will be undefined after that. So the placement of the configuration is the first place I'd look.

[Aljumaily]

@dpvc Thank you for the reply. It seems that using the async attribute fixes it.

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

Do you have an idea as to why this is the case? Also, is there any cons to using async here?

[dpvc]

Did you check that the configuration script comes before the script that loads tex-chtml.js? Having them in the wrong order is the most likely cause. If they are in the wrong order, your readers may randomly get this problem, depending on how fast their network connections are, and the state of their browser cache.