fix(renderer): omitting internal symbol from mdx props (#10813)

.changeset/wild-mice-battle.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Omitting compiler-internal symbol from user components to fix breaking error messages

packages/astro/src/runtime/server/jsx.ts

@@ -84,6 +84,8 @@ Did you forget to import the component or is it possible there is a typo?`);
 			}
 			if (typeof vnode.type === 'function') {
 				if (vnode.props[hasTriedRenderComponentSymbol]) {
+					// omitting compiler-internals from user components
+					delete vnode.props[hasTriedRenderComponentSymbol];
 					const output = await vnode.type(vnode.props ?? {});
 					if (output?.[AstroJSX] || !output) {
 						return await renderJSXVNode(result, output);

packages/integrations/mdx/test/fixtures/mdx-plus-react-errors/astro.config.mjs

@@ -0,0 +1,6 @@
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+
+export default {
+	integrations: [mdx(), react()],
+}

packages/integrations/mdx/test/fixtures/mdx-plus-react-errors/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/mdx-plus-react-errors",
+  "private": true,
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "@astrojs/react": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

packages/integrations/mdx/test/fixtures/mdx-plus-react-errors/src/components/BrokenComponent.jsx

@@ -0,0 +1,8 @@
+import { useState } from "react";
+
+export default function BrokenComponent() {
+  useState(0);
+  a;
+
+  return <p>Whoops!</p>;
+};

packages/integrations/mdx/test/fixtures/mdx-plus-react-errors/src/content/config.js

@@ -0,0 +1,12 @@
+import { z, defineCollection } from "astro:content";
+
+const filesSchema = () => {
+  return z.object({});
+};
+
+const filesCollection = defineCollection({
+  type: "content",
+  schema: filesSchema(),
+});
+
+export const collections = { files: filesCollection, };

packages/integrations/mdx/test/fixtures/mdx-plus-react-errors/src/content/files/file.mdx

@@ -0,0 +1,4 @@
+
+import BrokenComponent from '../../components/BrokenComponent'
+
+<BrokenComponent {...props} />

packages/integrations/mdx/test/fixtures/mdx-plus-react-errors/src/pages/broken.astro

@@ -0,0 +1,9 @@
+---
+import { getCollection } from "astro:content";
+const files = await getCollection("files");
+
+const { Content } = await files[0].render();
+---
+
+<Content />
+

packages/integrations/mdx/test/mdx-plus-react-errors.test.js

@@ -0,0 +1,33 @@
+import * as assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+function hookError() {
+	const error = console.error;
+	const errors = [];
+	console.error = function (...args) {
+		errors.push(args);
+	};
+	return () => {
+		console.error = error;
+		return errors;
+	};
+}
+
+describe('MDX and React with build errors', () => {
+	let fixture;
+	let unhook;
+
+	it('shows correct error messages on build error', async () => {
+		try {
+			fixture = await loadFixture({
+				root: new URL('./fixtures/mdx-plus-react-errors/', import.meta.url),
+			});
+			unhook = hookError();
+			await fixture.build();
+		} catch (err) {
+			assert.equal(err.message, 'a is not defined');
+		}
+		unhook();
+	});
+});

pnpm-lock.yaml

@@ -4679,6 +4679,24 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
 
+  packages/integrations/mdx/test/fixtures/mdx-plus-react-errors:
+    dependencies:
+      '@astrojs/mdx':
+        specifier: workspace:*
+        version: link:../../..
+      '@astrojs/react':
+        specifier: workspace:*
+        version: link:../../../../react
+      astro:
+        specifier: workspace:*
+        version: link:../../../../../astro
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+
   packages/integrations/mdx/test/fixtures/mdx-vite-env-vars:
     dependencies:
       '@astrojs/mdx':