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 #https://github.com/gatsbyjs/gatsby/issues/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 the`require` syntax isn't compatible with current ESM syntax. 
- Similar discussion that might help: #https://github.com/gatsbyjs/gatsby/discussions/31599#discussioncomment-1754627 

[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 https://github.com/gatsbyjs/gatsby/issues/21866#issuecomment-1399181236 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)
}