🐛 BUG: MDX, remark-math, and rehype-mathjax result in an error or nothing rendering

[lloydjatkinson]

What version of @astrojs/compiler are you using?

0.23.3

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Following the MDX docs on supporting maths I installed remark-math and rehype-mathjax. However, locally I get a parsing error but on Stackblitz it just renders invisible SVGs.

Locally this is what I have:

---
title: "test"
description: "test"
dates:
    published: 2022-02-15T18:39:52+0000
images:
    primaryImage:
        path: /assets/blog/nick-fewings-zF_pTLx_Dkg-unsplash-small.jpg
categories:
    - Test
layout: "../../../layouts/ArticleLayout.astro"
---

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

import rehypeExternalLinks from 'rehype-external-links';
import remarkMath from 'remark-math';
import rehypeMathJax from 'rehype-mathjax';

...

integrations: [
        tailwind(),
        sitemap(),
        mdx({
            rehypePlugins: [
                [rehypeMathJax],
                [rehypeExternalLinks, { target: '_blank' }]
            ],
            remarkPlugins: [
                [remarkMath],
            ],
        }),

Which results in:

 error   Transform failed with 1 error:
  C:/Users/Lloyd/source/repos/lloydatkinson.net/src/pages/posts/2022/test.mdx:71:8: ERROR: Expected identifier but found ";"
  File:
    C:/Users/Lloyd/source/repos/lloydatkinson.net/src/pages/posts/2022/test.mdx
  Stacktrace:
    at failureErrorWithLog (C:\Users\Lloyd\source\repos\lloydatkinson.net\node_modules\esbuild\lib\main.js:1624:15)
    at C:\Users\Lloyd\source\repos\lloydatkinson.net\node_modules\esbuild\lib\main.js:1413:29
    at C:\Users\Lloyd\source\repos\lloydatkinson.net\node_modules\esbuild\lib\main.js:678:9
    at handleIncomingPacket (C:\Users\Lloyd\source\repos\lloydatkinson.net\node_modules\esbuild\lib\main.js:775:9)
    at Socket.readFromStdout (C:\Users\Lloyd\source\repos\lloydatkinson.net\node_modules\esbuild\lib\main.js:644:7)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
 (x3)

Really no idea why it has different results locally or on Stackblitz.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kseosl?file=astro.config.mjs,src%2Fpages%2Findex.mdx&on=stackblitz

[fbubbar]

I'm getting the same error with pnpm using rehype-raw with rehype-shiki-twoslash.

MRE: Stackblitz

[fbubbar]

I came back to this issue after a while. After performing some debugging, it seems the error actually occurs when the @mdx-js/mdx package generates an empty const statement. I checked and it seems there is already an issue open for this exact problem. @lloydjatkinson seeing as the bug is not actually related to the Astro compiler you may want to close this issue.

[natemoo-re]

Thanks @fbubbar! Going to close this since it's being tracked upstream.