Provide a better error message when no jsx renderer configured (#4603)

* Provide a better error message when no jsx renderer configured

* Add a changeset

2 files changed, 19 insertions, 4 deletions

diff --git a/.changeset/tough-zoos-bathe.md b/.changeset/tough-zoos-bathe.md
new file mode 100644
index 000000000..9e16bba6f
--- /dev/null
+++ b/.changeset/tough-zoos-bathe.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix error when no JSX renderer configured
diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts
index a38a6a103..455fd474b 100644
--- a/packages/astro/src/vite-plugin-jsx/index.ts
+++ b/packages/astro/src/vite-plugin-jsx/index.ts
@@ -160,14 +160,14 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 	let astroJSXRenderer: AstroRenderer;
 	// The first JSX renderer provided is considered the default renderer.
 	// This is a useful reference for when the user only gives a single render.
-	let defaultJSXRendererEntry: [string, AstroRenderer];
+	let defaultJSXRendererEntry: [string, AstroRenderer] | undefined;
 
 	return {
 		name: 'astro:jsx',
 		enforce: 'pre', // run transforms before other plugins
 		async configResolved(resolvedConfig) {
 			viteConfig = resolvedConfig;
-			const possibleRenderers = await collectJSXRenderers(config._ctx.renderers);
+			const possibleRenderers = collectJSXRenderers(config._ctx.renderers);
 			for (const [importSource, renderer] of possibleRenderers) {
 				jsxRenderers.set(importSource, renderer);
 				if (importSource === 'astro') {
@@ -224,8 +224,8 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 			}
 
 			// if we still can’t tell the import source, now is the time to throw an error.
-			if (!importSource) {
-				const [defaultRendererName] = defaultJSXRendererEntry[0];
+			if (!importSource && defaultJSXRendererEntry) {
+				const [defaultRendererName] = defaultJSXRendererEntry;
 				error(
 					logging,
 					'renderer',
@@ -237,6 +237,16 @@ Add ${colors.cyan(
 `
 				);
 				return null;
+			} else if(!importSource) {
+				error(
+					logging,
+					'renderer',
+					`${colors.yellow(id)}
+Unable to find a renderer for JSX. Do you have one configured in your Astro config? See this page to learn how:
+https://docs.astro.build/en/core-concepts/framework-components/#installing-integrations
+`
+				);
+				return null;
 			}
 
 			const selectedJsxRenderer = jsxRenderers.get(importSource);