fix: pass key argument as prop in JSX transform (#14111)

ascorbic · web-flow · commit 5452ee67f95f · 2025-07-22T16:50:03.000+01:00
diff --git a/.changeset/cruel-pandas-wonder.md b/.changeset/cruel-pandas-wonder.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug that prevented "key" from being used as a prop for Astro components in MDX
diff --git a/packages/astro/src/jsx-runtime/index.ts b/packages/astro/src/jsx-runtime/index.ts
@@ -72,12 +72,15 @@ function transformSetDirectives(vnode: AstroVNode) {
 	}
 }
 
-function createVNode(type: any, props: Record<string, any>) {
+function createVNode(type: any, props: Record<string, any> = {}, key?: string | number): AstroVNode {
+	if (key) {
+		props.key = key;
+	}
 	const vnode: AstroVNode = {
 		[Renderer]: 'astro:jsx',
 		[AstroJSX]: true,
 		type,
-		props: props ?? {},
+		props,
 	};
 	transformSetDirectives(vnode);
 	transformSlots(vnode);
diff --git a/packages/integrations/mdx/test/fixtures/mdx-page/src/components/KeyTest.astro b/packages/integrations/mdx/test/fixtures/mdx-page/src/components/KeyTest.astro
@@ -0,0 +1,10 @@
+---
+export interface Props {
+  key: string;
+}
+
+const { key } = Astro.props
+
+---
+
+<p id="key-test">{key}</p>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-page/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-page/src/pages/index.mdx
@@ -1,3 +1,6 @@
 import '../styles.css'
+import KeyTest from '../components/KeyTest.astro'
 
 # Hello page!
+
+<KeyTest key="oranges"  />
diff --git a/packages/integrations/mdx/test/mdx-page.test.js b/packages/integrations/mdx/test/mdx-page.test.js
@@ -54,6 +54,14 @@ describe('MDX Page', () => {
 			const html = await fixture.readFile('/chinese-encoding-layout-manual/index.html');
 			assert.doesNotMatch(html, /<meta charset="utf-8"/);
 		});
+
+		it('renders MDX with key prop', async () => {
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const keyTest = document.querySelector('#key-test');
+			assert.equal(keyTest.textContent, 'oranges');
+		});
 	});
 
 	describe('dev', () => {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes a bug that prevented "key" from being used as a prop for Astro components in MDX