gatsby-plugin-mdx doesn't render "complex" Katex formulas

Description

I don’t know the exact terms to describe it, but “complex” Katex formulas prevent MDX from rendering. (Feel free to change the title into something more specific)

I’ve figured out a workaround by passing the formula as a string to a custom component that runs the string through katex.renderToString and then passes the output to dangerouslySetInnerHTML. That might help in pinpointing where the problem occurs.

(⚠️ Note for anyone looking for a QUICKFIX: use this component to render Katex formulas that break rendering)

I have already talked to the MDX team about this, and they managed to get it working by removing gatsby-plugin-mdx from the equation (see the link for codesandboxes with examples).

Steps to reproduce

There is a minimal reproducible example here with instructions on how to make it fail as well as the workaround in action.

This is the formula in question:

$$
\begin{aligned}
  \bar{x} &= \dfrac{0+1+2+ \ldots +8}{9} = 3.56 \\
  \bar{y} &= \dfrac{23.5+25+ \ldots +37.5}{9}=30
\end{aligned}
$$

Expected result

The formula should render.

Actual result

I get this error:

error "gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

unknown: Expecting Unicode escape sequence \uXXXX (18:9)

  16 | {x}
  17 | {` &= \\dfrac`}
> 18 | {0+1+2+ \ldots +8}
     |          ^
  19 | {9}
  20 | {` = 3.56 `}
  21 | {`\\`}

[nikbelikov]

@nikbelikov How were you able to get the \begin{align*}...\end{align*} to work properly? Which versions are you using?

please, mention @nikoladev instead 😃

[KyleAMathews]

Marked “not stale”. Yeah, we need to do soon a major release for the whole suite of plugins with updated dependencies.