fails to render math equations in mdx

[ArnieHung]

Description

• In order to render Latex in mdx, I followed the doc https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/, using gatsby-remark-katex under gatsby-plugin-mdx as configurated in gatsby-config.js:

// gatsby-config.js
resolve: 'gatsby-plugin-mdx',
    options: {
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-katex`,
          options: {
            strict: `ignore`
          }
        },
      },

• But when running gatsby develop, the following warnings show up despite it's been successfully built:

warn Error persisting state: function mathPlugin (opts) {
  if (opts == null) opts = {}
  blockPlugin.call(this, opts)
  inlinePlugin.call(this, opts)
} could not be cloned.

Possible solutions

• As discussed in #[gatsby-remark-katex] Doesn’t work with gatsby-plugin-mdx gatsbyjs/gatsby#21866, it seems that there is a bug roots in the gatsby-remark-katex.
• Walk-around the provided: directly using remark-math for latex in mdx (rehype-katex for inline latex in html) instead:

// gatsby-config.js
{
    resolve: 'gatsby-plugin-mdx',
    options: {
      extensions: ['.mdx', '.md'],
      remarkPlugins: [require('remark-math')],
      rehypePlugins: [require('rehype-katex')],
    },
  },

Problem Remains

• I tried the walk-around as suggested above, however it seems like the therequire syntax isn't compatible with current ESM syntax.
• Similar discussion that might help: #Support ESM usage with Gatsby gatsbyjs/gatsby#31599 (comment)

[ingyer-ks]

Dear,
Like you guessed, until Gatsby 5.3 it didn't support ESM.
So, you need to use remark-math^3.0.1 and rehype-katex^5.0.0 with your Possible solutions style.
And like I mentioned in gatsbyjs/gatsby#21866 (comment) load katex css in gatsby-ssr.js file like below:

const HeadComponents = [
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
    crossorigin="anonymous"
  ></link>
]

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents(HeadComponents)
}