Less-than signs in inline math mode (Katex) are not understood as math in MDX v2.

[janmaltel]

Subject of the issue

I'm trying to upgrade from MDX v1 to v2. Inline equations such as $x < 3$ used to be correctly understood as a LaTeX equation in my old setup but stopped working with v2.

I'm using gatsby.js and the MDX / Katex setup described in this issue comment (see below for specific package versions).

Your environment

• OS: macOS 10.14.6
• Packages:

// package.json
    "@mdx-js/mdx": "v2.0.0-next.8",
    "@mdx-js/react": "v2.0.0-next.8",
    "gatsby": "2.25.2",
    "gatsby-plugin-mdx": "1.3.1",
    "remark-html-katex": "3.0.0",
    "remark-math": "3.0.1",

And my config file:

// gatsby-config.js
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve(`./src/components/mdxLayout.js`),
        },
        remarkPlugins: [
          require('remark-math'),
          require('remark-html-katex'),
        ],
      },
    },

• Env: node --version v10.23.3, npm --version 6.14.11

Steps to reproduce (incl. expected and actual behavior)

The mdx file

// works.mdx
greater-than sign inline math $x > 3$ and smaller-than sign in code snippet `x < 3`

produces

but

// doesntwork.mdx
$x<3$

throws the following error:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed.

Unexpected character `3` (U+0033) before name, expected a character that can start a name, such as a letter, `$`, or `_`/Users/malte/Desktop/janmaltel/src/pages/posts/gridworld.mdx: Unexpected character `3` (U+0033) before name, expected a
character that can start a name, such as a letter, `$`, or `_`

Expected behaviour

Render a LaTeX equation $x<3$.

Actual behaviour

Webpack error

[nikoladev]

Gatsby uses some older plugins in gatsby-plugin-mdx so not everything works correctly. I had the same problem with some Katex formulas which I described here. In there you can also find a link to a reproduction of the bug, which also contains a workaround for the bug using a custom Katex component (the component and the implementation).

Hope it helps!

[ChristianMurphy]

As noted by @nikoladev this appears to be an issue with Gatsby, (see #1329) which will be resolved by gatsbyjs/gatsby#28031 rather than an issue with MDX itself