gatsby-plugin-mdx doesn't render "complex" Katex formulas #28031
Description
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 | {`\\`}