Issues with loading MathJax (math equation renderer) on Hugo Netlify site

Hi Netlify support (and others who may potentially have experience in this issue),

I’m having some issues loading MathJax 3 on my Hugo website deployed via Netlify. MathJax loads properly when I preview my website locally. However, remotely, things do not work as expected. I have read that Netlify may interrupt rendering of math by pruning $ symbols (no longer can find a source for that at the moment, so that could be wrong) and I have also read the following post from last year (Enabling MathJax without using CMS), so I was wondering whether the issue could be tied to Netlify. Looking at the page in question through Firefox and Safari consoles (, the error messages seem to correspond to the Polyfill.js library, and I do not see any errors associated with MathJax.

Thank you very much for any possible help!

EDIT: As an addendum, deleting the Polyfill line from the html file that loads MathJax did not do anything, and it looks like MathJax just does not load at all from looking at the console output. Was thinking perhaps something was blocking its loading.

Realized I probably needed to provide some more supporting information.

As far as I can tell, having initially followed the steps in this post (, I think my code for loading MathJax in my Hugo theme partials folder is correct. I have a mathjax_load.html file:

  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$','$$'], ['\\[', '\\]']],
      processEscapes: true,
      processEnvironments: true
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']

  window.addEventListener('load', (event) => {
        x.parentElement.classList += 'has-jax'})

<script src=""></script>
<script type="text/javascript" id="MathJax-script" async

that is called by my header.html file:

<html lang="{{ .Site.LanguageCode }}">
    <link rel="stylesheet" href="//;one&#45;light.min.css">
    <script src="//"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel="manifest" href="/images/site.webmanifest">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
    <title>{{ .Title }} | {{ .Site.Title }}</title>
    <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}" />
    <link rel="stylesheet" href="{{ "/css/fonts.css" | relURL }}" />
    {{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
    {{- end }}
    {{ partial "mathjax_load.html" . }}
    {{ partial "head_custom.html" . }}


Locally, my page looks as expected:

The Netlify deployment on the other hand does not render any of the LaTeX code without the loading of MathJax, as can be seen via

I checked the source of that webpage and I don’t see the MathJax-script inserted on the page. That’s the cause probably.

Maybe if you can share the repo, it can get easier to see what’s happening.

Thank you for getting back to me. Yes, am stumped for why MathJax is not loading at all, not even an error message from the console about a failure to load. Here is my repository, thanks:

I figured out the problem. At some point, the theme stopped updating because in an attempted re-install, I used git clone over a previous git submodule. Thank you very much for your help, the issue is fixed now.