Using layout: in *.mdx causes build to crash

[ota-meshi]

Astro Info

❯ astro info
Astro                    v4.5.6
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If you use layout: in a *.mdx file like the following, the astro build command will generate an error and exit.

---
layout: ../Layout.astro
---

# Hello world!

> @example/with-mdx@0.0.1 build
> astro build

12:38:39 [build] output: "static"
12:38:39 [build] directory: /home/projects/github-razdlq/dist/
12:38:39 [build] Collecting build info...
12:38:39 [build] ✓ Completed in 259ms.
12:38:39 [build] Building static entrypoints...
12:38:40 [ERROR] [vite] x Build failed in 1.10s
src/pages/index.mdx (3:15): Identifier "_jsx" has already been declared
file: /home/projects/github-razdlq/src/pages/index.mdx:3:15
1: ---
2: layout: ../Layout.astro
3: ---
      ^
4: 
5: # Hello world!
  Stack trace:
    at getRollupError (/home/projects/github-razdlq/node_modules/rollup/dist/es/shared/parseAst.js:527:41)
    at Module.error (/home/projects/github-razdlq/node_modules/rollup/dist/es/shared/node-entry.js:13679:29)
    at ImportDeclaration.initialise (/home/projects/github-razdlq/node_modules/rollup/dist/es/shared/node-entry.js:10143:28)
    at convertNodeList (/home/projects/github-razdlq/node_modules/rollup/dist/es/shared/node-entry.js:12931:34)
    at convertNode (/home/projects/github-razdlq/node_modules/rollup/dist/es/shared/node-entry.js:12922:28)

If you put a breakpoint here and look at the result.code after babel.transformAsync,

astro/packages/astro/src/vite-plugin-mdx/index.ts

Line 36 in 2fc7231

const result = await babel.transformAsync(code, {

you will see that import is duplicated.

import { __astro_tag_component__ } from "astro/runtime/server/index.js";
import { Fragment, jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "astro/jsx-runtime";
import { jsx as layoutJsx, jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "astro/jsx-runtime";
const MDXLayout = async function ({
  children
}) {
//...

I'm not sure which babel plugin it's a problem with.

What's the expected result?

The build is successful.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-razdlq?file=src%2Fpages%2Findex.mdx

Participation

• I am willing to submit a pull request for this issue.

[wonrax]

I'm having the same error just after performing npm update today

"@astrojs/mdx": "^2.2.0",
"@astrojs/react": "^3.1.0",
"astro": "^4.5.5",

[ota-meshi]

It seems like it's a babel issue. The results are different between v7.24.0 and v7.24.2. I still don't know which package of babel is the problem.

babel repl v7.24.0
babel repl v7.24.2

[Princesseuh]

We'll see how long Babel takes to fix this. If it takes more than a few hours, we'll have to pin it. In the meantime you can use the following snippet in your package.json to force a working version:

{
  "overrides": {
    "@babel/helper-module-imports": "~7.22.15"
  },
  "pnpm": {
    "overrides": {
      "@babel/helper-module-imports": "~7.22.15"
    }
  },
  "resolutions": {
    "@babel/helper-module-imports": "~7.22.15"
  }
}

[ota-meshi]

I submitted a PR to babel.

babel/babel#16370

[nicolo-ribaudo]

I'm releasing a new @babel/helper-module-imports version, it should be out in ~15 mins

[nicolo-ribaudo]

Released as 7.24.3

[Princesseuh]

Made a PR to ensure we're using the latest version! Thank you all for working on this so quickly, awesome work.