Add warnings if multiple JSX renderers are used (#12887)

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

5 files changed, 43 insertions, 0 deletions

diff --git a/.changeset/strong-games-travel.md b/.changeset/strong-games-travel.md
new file mode 100644
index 000000000..38edec422
--- /dev/null
+++ b/.changeset/strong-games-travel.md
@@ -0,0 +1,8 @@
+---
+'@astrojs/preact': patch
+'@astrojs/react': patch
+'@astrojs/solid-js': patch
+'@astrojs/vue': patch
+---
+
+Adds a warning message when multiple JSX-based UI frameworks are being used without either the `include` or `exclude` property being set on the integration.
diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
index 4f999103c..1f6b7857b 100644
--- a/packages/integrations/preact/src/index.ts
+++ b/packages/integrations/preact/src/index.ts
@@ -71,6 +71,14 @@ export default function ({ include, exclude, compat, devtools }: Options = {}):
 					injectScript('page', 'import "preact/debug";');
 				}
 			},
+			'astro:config:done': ({ logger, config }) => {
+				const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
+				const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));
+
+				if (enabledKnownJsxRenderers.length > 1 && !include && !exclude) {
+					logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/preact/#combining-multiple-jsx-frameworks for more information.');
+				}
+			}
 		},
 	};
 }
diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index 46da29c7b..16f4064d0 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -100,6 +100,14 @@ export default function ({
 					injectScript('before-hydration', preamble);
 				}
 			},
+			'astro:config:done': ({ logger, config }) => {
+				const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
+				const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));
+
+				if (enabledKnownJsxRenderers.length > 1 && !include && !exclude) {
+					logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/react/#combining-multiple-jsx-frameworks for more information.');
+				}
+			}
 		},
 	};
 }
diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts
index f39dffed5..662bfa254 100644
--- a/packages/integrations/solid/src/index.ts
+++ b/packages/integrations/solid/src/index.ts
@@ -108,6 +108,14 @@ export default function (options: Options = {}): AstroIntegration {
 					injectScript('page', 'import "solid-devtools";');
 				}
 			},
+			'astro:config:done': ({ logger, config }) => {
+				const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
+				const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));
+
+				if (enabledKnownJsxRenderers.length > 1 && !options.include && !options.exclude) {
+					logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/solid-js/#combining-multiple-jsx-frameworks for more information.');
+				}
+			}
 		},
 	};
 }
diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts
index d9e42a6dd..2c7992fe8 100644
--- a/packages/integrations/vue/src/index.ts
+++ b/packages/integrations/vue/src/index.ts
@@ -158,6 +158,17 @@ export default function (options?: Options): AstroIntegration {
 				}
 				updateConfig({ vite: await getViteConfiguration(command, options) });
 			},
+			'astro:config:done': ({ logger, config }) => {
+				if (!options?.jsx) return;
+
+				const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
+				const enabledKnownJsxRenderers = config.integrations.filter((renderer) => knownJsxRenderers.includes(renderer.name));
+
+				// This error can only be thrown from here since Vue is an optional JSX renderer
+				if (enabledKnownJsxRenderers.length > 1 && !options?.include && !options?.exclude) {
+					logger.warn('More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/solid-js/#combining-multiple-jsx-frameworks for more information.');
+				}
+			}
 		},
 	};
 }