window.MathJax未定义？MathJax渲染公式报错求助

问题描述 #

在使用MathJax渲染数学公式时，出现window.MathJax未定义的错误，相关代码如下：

HTML引入代码 #

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="icon" href="/icons/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/icons/favicon.ico" type="image/x-icon">
    <!-- inject:css -->
    <!-- endinject -->
    <script type="text/x-mathjax-config">
        MathJax = {
          options: {
            renderActions: {
              addMenu: []
            }
          },
        };
        MathJax.Hub.Config({
          tex2jax: {
            inlineMath: [ ['$','$'], ["\\(", "\\)"] ],
            processEscapes: true
          }
        });
    </script>
    <script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
    <div id="application-content">
    </div>
</body>
<!-- inject:js -->
<!-- endinject -->
<script type="application/javascript">
    EMBED.default.init();
</script>
</html>

React组件代码 #

import React, { Component } from 'react';

export default class MathBlock extends Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false,
        };
    }

    render() {
        const text = this.props.block.getText();
        const latexRegex = /\${2}(.*?)\${2}/;
        const hasLatex = latexRegex.test(this.props.block.getText());

        return (
            <div>
                <div
                    dangerouslySetInnerHTML={{
                        __html: hasLatex
              ? window.MathJax.tex2svg(text.replaceAll('$', '')).innerHTML
              : window.MathJax.mathml2svg(text).innerHTML,
                    }}
                />
            </div>
        );
    }
}

MathBlock.propTypes = {
    block: React.PropTypes.object.isRequired,
};

问题原因及修复步骤 #

1. 混用MathJax v2和v3 API #

你引入的是MathJax 3.x，但配置代码使用了MathJax.Hub.Config——这是MathJax 2.x的专属API，3.x已完全重构，不存在该对象。

修复配置代码：
替换原配置脚本为3.x格式，将TeX配置移到tex字段下：

<script type="text/x-mathjax-config">
    MathJax = {
      options: {
        renderActions: {
          addMenu: []
        }
      },
      tex: {
        inlineMath: [ ['$','$'], ["\\(", "\\)"] ],
        processEscapes: true
      }
    };
</script>

2. Async加载导致组件渲染时MathJax未初始化 #

加载MathJax的script标签使用了async属性，脚本异步加载执行，但React组件render方法会在挂载时立即执行，此时MathJax可能还未加载完成，导致window.MathJax不存在。

两种修复方式：

• 方式一：移除async属性
  改为同步加载脚本，确保组件渲染前MathJax已初始化：

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

• 方式二：监听MathJax加载状态（推荐）
  在React组件中监听MathJax加载完成事件，待加载完成后再渲染公式：

  import React, { Component } from 'react';
  
  export default class MathBlock extends Component {
      constructor(props) {
          super(props);
          this.state = {
              open: false,
              mathJaxReady: false
          };
      }
  
      componentDidMount() {
          if (window.MathJax) {
              this.setState({ mathJaxReady: true });
          } else {
              window.addEventListener('load', () => {
                  this.setState({ mathJaxReady: true });
              });
          }
      }
  
      render() {
          if (!this.state.mathJaxReady) {
              return <div>加载中...</div>;
          }
  
          const text = this.props.block.getText();
          const latexRegex = /\${2}(.*?)\${2}/;
          const hasLatex = latexRegex.test(text);
  
          return (
              <div>
                  <div
                      dangerouslySetInnerHTML={{
                          __html: hasLatex
                                ? window.MathJax.tex2svg(text.replaceAll('$', '')).innerHTML
                                : window.MathJax.mathml2svg(text).innerHTML,
                      }}
                  />
              </div>
          );
      }
  }
  
  MathBlock.propTypes = {
      block: React.PropTypes.object.isRequired,
  };
  

3. 确认API使用正确性 #

MathJax 3.x中tex2svg和mathml2svg是window.MathJax的有效方法，你引入的tex-mml-svg.js包已包含这两个功能，只需确保传入的公式格式合法即可。

内容的提问来源于stack exchange，提问作者ahmedskulj10