gatsby-plugin-mdx never parse inlineMath or math block into MdxAst

[cangSDARM]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

My English may be broken. Sorry, I hope there wasn't any missunderstanding.

The ast:
http://localhost:8000/___graphql?query=query%20MyQuery%20%7B%0A%20%20allMdx(filter%3A%20%7Bfields%3A%20%7BtemplateTag%3A%20%7Bin%3A%20%22math%22%7D%7D%7D)%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20mdxAST%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A&operationName=MyQuery
The configs:
https://github.com/cangSDARM/blog/blob/master/gatsby-config.js#L29

I tried to use gatsby-plugin-katex or remark-html-katex, all required inlineMath and math block in AST, when neither of them exist.

Reproduction Link

https://github.com/cangSDARM/blog

Steps to Reproduce

1. use my reproduction link
2. run it locally.
3. navigate to : http://localhost:8000/math/

Expected Result

render inlineMath or math block

there should be

$x^2 + y_1 = \pi$

and

$$ {x'\brack y'} = \begin{bmatrix} s{x} & 0 \ 0 & s{y} \end{bmatrix}{x\brack y} $$

rendered

Actual Result

all rendered as a raw text

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.0
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
  npmPackages:
    gatsby: ~4.4.0 => 4.4.0 
    gatsby-plugin-image: ~2.4.0 => 2.4.0 
    gatsby-plugin-manifest: ~4.4.0 => 4.4.0 
    gatsby-plugin-material-ui: ^4.1.0 => 4.1.0 
    gatsby-plugin-mdx: ~3.4.0 => 3.4.0 
    gatsby-plugin-offline: ~5.4.0 => 5.4.0 
    gatsby-plugin-react-helmet-async: ^1.2.0 => 1.2.0 
    gatsby-plugin-sharp: ~4.4.0 => 4.4.0 
    gatsby-plugin-typescript: ^4.4.0 => 4.4.0 
    gatsby-remark-autolink-headers: ~5.4.0 => 5.4.0 
    gatsby-remark-images: ~6.4.0 => 6.4.0 
    gatsby-remark-prismjs: ~6.4.0 => 6.4.0 
    gatsby-source-filesystem: ~4.4.0 => 4.4.0 
    gatsby-transformer-sharp: ~4.4.0 => 4.4.0 
  npmGlobalPackages:
    gatsby-cli: 4.4.0

Config Flags

none

[iChenLei]

Workaround for you

Downgrade "remark-math"

- "remark-math": "^5.1.1",
+ "remark-math": "^3.0.1",

Work as expected 🎉 !

Why ?

gatsby-plugin-mdx dependeneices list

    "gatsby-plugin-mdx": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/gatsby-plugin-mdx/-/gatsby-plugin-mdx-3.4.0.tgz",
      "integrity": "sha512-SJTIZsQ9lhjkd9GX1v4o1kzYPlu5LTWydHNdpddsP4w9U+dBLcKGXm4ee1PHWpwNL1Y8PeOhRQBUGhbLAbeXTA==",
      "requires": {
        "@babel/core": "^7.15.5",
        "@babel/generator": "^7.15.4",
        "@babel/helper-plugin-utils": "^7.14.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
        "@babel/preset-env": "^7.15.4",
        "@babel/preset-react": "^7.14.0",
        "@babel/runtime": "^7.15.4",
        "@babel/types": "^7.15.4",
        "camelcase-css": "^2.0.1",
        "change-case": "^3.1.0",
        "core-js": "^3.17.2",
        "dataloader": "^1.4.0",
        "debug": "^4.3.1",
        "escape-string-regexp": "^1.0.5",
        "eval": "^0.1.4",
        "fs-extra": "^10.0.0",
        "gatsby-core-utils": "^3.4.0",
        "gray-matter": "^4.0.2",
        "json5": "^2.1.3",
        "loader-utils": "^1.4.0",
        "lodash": "^4.17.21",
        "mdast-util-to-string": "^1.1.0",
        "mdast-util-toc": "^3.1.0",
        "mime": "^2.4.6",
        "mkdirp": "^1.0.4",
        "p-queue": "^6.6.2",
        "pretty-bytes": "^5.3.0",
        "remark": "^10.0.1",  // ❗❗❗❗ look here❗❗❗❗
        "remark-retext": "^3.1.3",
        "retext-english": "^3.0.4",
        "slugify": "^1.4.4",
        "static-site-generator-webpack-plugin": "^3.4.2",
        "style-to-object": "^0.3.0",
        "underscore.string": "^3.3.5",
        "unified": "^8.4.2",
        "unist-util-map": "^1.0.5",
        "unist-util-remove": "^1.0.3",
        "unist-util-visit": "^1.4.1"
      },

remark-math changelog

https://github.com/remarkjs/remark-math/releases/tag/4.0.0

9b4b3c3 Update for micromark in remark@13
(breaking, this update will not work with remark lower than v13, and see commit for other changes)

So remark-math(>= 4.0.0) not work as expected with gatsby-plugin-mdx !

cc @wardpeet @cangSDARM

[iChenLei]

@cangSDARM Why close this issue ? This is still a problem for gatsby user, we need fix it.

[cangSDARM]

There are many issues mentioned because of this dependency version. Although the problem is presented in a different way. @iChenLei
If necessary, I will keep it

[LekoArts]

We're working on ESM support this quarter (#31599) which will unblock MDX v2 (#34421) which in turn will unblock updating remark. Please watch these topics/our release notes on updates for this.

Thus I'll close this as it's blocked by ESM.

[0p3r4t0r]

After a lot of frustration I found a workaround. The source article is in Japanese, but the steps are easy to follow.

1. Install the following

   npm install remark-math@3.0.1 rehype-katex@5.0.0
   

2. gatsby-config.ts

   module.exports = {
     plugins: [
       {
         resolve: 'gatsby-plugin-mdx',
         options: {
           remarkPlugins: [
             require('remark-math'),
           ],
           rehypePlugins: [
             require('rehype-katex'),
             // If you want to pass options as a tuple.
             // [require('rehype-katex'), { strict: 'ignore' }],
           ],
         }
       }
     ]
   }
   

3. gatsby-broswer.ts

   import 'katex/dist/katex.min.css'