Error processing latex with curly braces using remark-math, remark-html-katex plugins

[Eric Pacuit]

Describe the bug
When using the remark-math and remark-html-katex remarkPlugins, there is an error when parsing LaTeX code containing curly braces.

To Reproduce
In an mdx file add LaTeX code as usual. There is an error when the LaTeX contains curly braces:

If a mdx file contains:

$\frac{x}{2}$

then there is an error processing the mdx file:

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/epacuit/Dropbox/classes/ppe-book/ppe/src/pages/page-3.mdx: Unexpected digit after hash token (35:35)

  33 |           }}><math parentName="span"><semantics parentName="math"><mrow parentName="semantics"><mfrac parentName="mrow"><mi parentName="mfrac">{`x`}</mi><mn parentName="mfrac">{`2`}</mn></mfrac></mrow><annotation parentName="semantics" {...{
  34 |                   "encoding": "application/x-tex"
> 35 |                 }}>&#123;`\\frac{x&#125;{2}`}</annotation></semantics></math></span><span parentName="span" {...{
     |                                    ^
  36 |             "className": "katex-html",
  37 |             "aria-hidden": "true"
  38 |           }}><span parentName="span" {...{
    at Object.raise (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:6344:17)
    at Object.readToken_numberSign (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:6661:12)
    at Object.getTokenFromCode (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:7017:14)
    at Object.getTokenFromCode (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:3631:18)
    at Object.nextToken (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:6542:12)
    at Object.next (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:6482:10)
    at Object.parseExprOp (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:8317:14)
    at Object.parseExprOps (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:8290:17)
    at Object.parseMaybeConditional (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:8253:23)
    at Object.parseMaybeAssign (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:8200:21)
    at Object.parseExpression (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:8148:23)
    at Object.jsxParseExpressionContainer (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:3450:30)
    at Object.jsxParseElementAt (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:3544:36)
    at Object.jsxParseElementAt (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:3529:32)
    at Object.jsxParseElementAt (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:3529:32)
    at Object.jsxParseElementAt (/Users/epacuit/Dropbox/classes/ppe-book/ppe/node_modules/@babel/parser/lib/index.js:3529:32)

gastby-config.js

module.exports = {
  siteMetadata: {
    title: `PPE Book`,
    description: `Methods in Philosophy, Politics and Economics`,
    author: `eric`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-material-ui`,
      // If you want to use styled components, in conjunction to Material-UI, you should:
      // - Change the injection order
      // - Add the plugin
      options: {
        // stylesProvider: {
        //   injectFirst: true,
        // },
      },
      // 'gatsby-plugin-styled-components',
    },
    { resolve: `gatsby-mdx`,
      options: {
        extensions: ['.mdx', '.md'],
        //defaultLayout: require.resolve('./src/components/blog-post-layout.js'),
        remarkPlugins: [require("remark-images"),
        require("remark-math"), require("remark-html-katex")],
    }
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    `gatsby-plugin-offline`,
  ],
}

page-3.mdx

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

# Testing...
Testing
## Add some math

$\frac{x}{2}$

Additional context

Any math not including curly braces is correctly parsed into html.