Repository: next.js
Issue: MDX cannot parse JavaScript variable to reproduce visualization 
Labels: bug,Markdown (MDX)

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Root directory: `docs` folder of this theme: https://github.com/onefact/nextra/blob/main/docs/

 me@laptop   ~/projects/onefact-nextra/docs     main    npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.4.0
      npm: 9.7.2
      Yarn: 1.22.18
      pnpm: 8.6.10
    Relevant Packages:
      next: 13.4.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

MDX (@next/mdx)

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/onefact/nextra/blob/main/docs/pages/flights-10m.mdx

### To Reproduce

1. Add an `mdx` file with the following contents: https://github.com/uwdata/mosaic/blob/main/docs/public/specs/esm/flights-10m.js, for example to `pages/flights-10m.mdx` as in this repo: https://github.com/onefact/nextra/blob/main/docs/pages/flights-10m.mdx:

```
import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec(
  `CREATE TEMP TABLE IF NOT EXISTS flights10m AS SELECT GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay, DISTANCE AS distance, DEP_TIME AS time FROM 'https://uwdata.github.io/mosaic-datasets/data/flights-10m.parquet'`
);

const $brush = vg.Selection.crossfilter();

export default vg.vconcat(
  vg.plot(
    vg.rectY(
      vg.from("flights10m", { filterBy: $brush }),
      { x: vg.bin("delay"), y: vg.count(), fill: "steelblue", inset: 0.5 }
    ),
    vg.intervalX({ as: $brush }),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights10m", { filterBy: $brush }),
      { x: vg.bin("time"), y: vg.count(), fill: "steelblue", inset: 0.5 }
    ),
    vg.intervalX({ as: $brush }),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights10m", { filterBy: $brush }),
      { x: vg.bin("distance"), y: vg.count(), fill: "steelblue", inset: 0.5 }
    ),
    vg.intervalX({ as: $brush }),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  )
);
```
2. Run `pnpm dev` 
3. View the error:
```
- error pages/flights-10m.mdx (15:12) @ $brush
- error Error [ReferenceError]: $brush is not defined
    at eval (webpack-internal:///./pages/flights-10m.mdx:38:15) {
  digest: undefined
}
  13 | import * as vg from "@uwdata/vgplot";
  14 | const MDXLayout = vg.vconcat(vg.plot(vg.rectY(vg.from("flights10m", {
> 15 |   filterBy: $brush
     |            ^
  16 | }), {
  17 |   x: vg.bin("delay"),
  18 |   y: vg.count(),
```

### Describe the Bug

The mdx compiler does not parse the JavaScript code for the visualization at https://uwdata.github.io/mosaic/examples/flights-10m.html

### Expected Behavior

The visualization should render as in https://uwdata.github.io/mosaic/examples/flights-10m.html - 

<img width="739" alt="image" src="https://github.com/vercel/next.js/assets/5317244/a7678bff-96ff-4200-adef-2126e3ba083a">


### Which browser are you using? (if relevant)

Firefox 115.0.2 (64-bit)

### How are you deploying your application? (if relevant)

Vercel

We are using this across @onefact and are grateful for your help!!! Have spent a few hours trying to debug this to no avail so appreciate any leads -- most likely this is on my end as I am new to MDX.