Refactor MDX components exports handling (#7904)

4 files changed, 15 insertions, 7 deletions

diff --git a/.changeset/loud-candles-admire.md b/.changeset/loud-candles-admire.md
new file mode 100644
index 000000000..3fe1f12e7
--- /dev/null
+++ b/.changeset/loud-candles-admire.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Handle `components` exports handling itself
diff --git a/.changeset/young-roses-teach.md b/.changeset/young-roses-teach.md
new file mode 100644
index 000000000..ff9c08e56
--- /dev/null
+++ b/.changeset/young-roses-teach.md
@@ -0,0 +1,5 @@
+---
+'astro': major
+---
+
+Remove MDX special `components` export handling
diff --git a/packages/astro/src/core/render/core.ts b/packages/astro/src/core/render/core.ts
index d6228fbbe..3a8edde5c 100644
--- a/packages/astro/src/core/render/core.ts
+++ b/packages/astro/src/core/render/core.ts
@@ -59,12 +59,7 @@ async function renderPage({ mod, renderContext, env, cookies }: RenderPage) {
 		locals: renderContext.locals ?? {},
 	});
 
-	// Support `export const components` for `MDX` pages
-	if (typeof (mod as any).components === 'object') {
-		Object.assign(renderContext.props, { components: (mod as any).components });
-	}
-
-	let response = await runtimeRenderPage(
+	const response = await runtimeRenderPage(
 		result,
 		Component,
 		renderContext.props,
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts
index 4d64a84d7..ecf2a9a95 100644
--- a/packages/integrations/mdx/src/index.ts
+++ b/packages/integrations/mdx/src/index.ts
@@ -171,11 +171,14 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 										code += `\nexport const file = ${JSON.stringify(fileId)};`;
 									}
 									if (!moduleExports.find(({ n }) => n === 'Content')) {
+										// If have `export const components`, pass that as props to `Content` as fallback
+										const hasComponents = moduleExports.find(({ n }) => n === 'components');
+
 										// Make `Content` the default export so we can wrap `MDXContent` and pass in `Fragment`
 										code = code.replace('export default MDXContent;', '');
 										code += `\nexport const Content = (props = {}) => MDXContent({
 											...props,
-											components: { Fragment, ...props.components },
+											components: { Fragment${hasComponents ? ', ...components' : ''}, ...props.components },
 										});
 										export default Content;`;
 									}