サーバーサイドでレンダリングされたHTMLを埋め込むReact SPAで、MathJaxでTypesetする

MathJax向けに書かれた数式を含むサーバーサイドでレンダリングされたHTMLを取ってきて、ReactのSPAに埋め込む場合、

componentDidMountでロード

async componentDidMount() {
  // この設定は、\colorを使うために必要
  ;(window as any).MathJax = {
    loader: {load: ['[tex]/color']},
    tex: {packages: {'[+]': ['color']}}
  }

  // MathJaxをロード
  const x = document.createElement('script')
  x.type = "text/javascript"
  x.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
  x.async = true
  ReactDOM.findDOMNode(this).appendChild(x)
}

componentDidUpdateでTypeset

componentDidUpdate() {
  const es = document.getElementsByClassName("math-expr")
  if (es) {
    ;(window as any).MathJax.typeset(es)
  }
}

\colorが使えない！

version 3から、autoloadの設定にするか、明示的にロードしないと使えなくなったようです。
http://docs.mathjax.org/en/latest/input/tex/extensions/color.html

また、書式も変わっています。