Problem using remark-math with MDX

I’ve been trying to plug in the KaTeX renderer into the chain of plugins for MDX, but so far, I’m stuck with with some of the formulae incorrectly rendering.

My webpack rules part is as follows:

{
  test: /\.mdx$/,
  use: [
    ...babelLoader,
    {
      loader: '@mdx-js/loader',
      options: {
        mdPlugins: [math],
        hastPlugins: [katex]
      }
    }
  ]
}

…where math and katex are the packages remark-math and rehype-katex, respectively. I’m using preact and preact-compat with the following aliases:

alias: {
  react: 'preact-compat/dist/preact-compat',
  'react-dom': 'preact-compat/dist/preact-compat',
  'react-addons-create-fragment': 'preact-compat/dist/preact-compat'
}

To illustrate the problem, I’m trying to render the following page:

import 'katex/dist/katex.css';
import { h } from 'preact';

## Math test

$$
\sum{1}
$$

$$
\sum{i}
$$

The first equation renders fine, since 1 is a literal and is just converted to a string in the JSX. However, the second equation uses {i} in the rendered JSX and tries to evaluate the i, which fails because i is undefined.

Is there a way to have JSX be ignored or forced to escape in the math portion of the MDX?

[silvenon]

@linonetwo released in v0.15.3-0.

[KrofDrakula]

Sorry, I’m AFK for the next couple of days, I may have missed something in my reproduction, like an older version of MDX, maybe. I’ll see if this is still an issue with my setup when I can check it. Thank you!