Update MDX example to address failure (#3799)

* fix: do not use symbol in JSX runtime * chore: update MDX example Co-authored-by: Nate Moore <[email protected]>
withastro · Jul 1, 2022 · 5fe5273 · 5fe5273
1 parent b9d26f3
commit 5fe5273
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/cyan-balloons-battle.md b/.changeset/cyan-balloons-battle.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix internal error for MDX integration
diff --git a/examples/with-mdx/.vscode/extensions.json b/examples/with-mdx/.vscode/extensions.json
@@ -1,4 +1,7 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "silvenon.mdx"
+  ],
   "unwantedRecommendations": []
 }
diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx
@@ -2,16 +2,18 @@ import Counter from '../components/Counter.jsx';
 import Title from '../components/Title.astro';
 export const components = { h1: Title };
 
-# Hello world!
-
 export const authors = [
 	{ name: 'Jane', email: '[email protected]' },
 	{ name: 'John', twitter: '@john2002' },
 ];
 export const published = new Date('2022-02-01');
 
+# Hello world!
+
 Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}.
 
 Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}.
 
-<Counter client:idle>## Counter</Counter>
+<Counter client:idle>
+	## This is a counter!
+</Counter>
diff --git a/packages/astro/src/jsx-runtime/index.ts b/packages/astro/src/jsx-runtime/index.ts
@@ -1,6 +1,6 @@
 import { Fragment, markHTMLString } from '../runtime/server/index.js';
 
-const AstroJSX = Symbol('@astrojs/jsx');
+const AstroJSX = 'astro:jsx';
 const Empty = Symbol('empty');
 
 interface AstroVNode {