withastro/astro · warning

More than one JSX renderer is enabled. This will lead to une

Error message

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.

What it means

During astro:config:done the Preact integration checks config.integrations for other known JSX renderer integrations (@astrojs/react, @astrojs/preact, @astrojs/solid-js). If two or more are present and neither the include nor the exclude option was passed to the Preact integration, Vite cannot decide which JSX transform to apply per file, so this warning fires: JSX behavior will be inconsistent or wrong for one of the frameworks.

Source

Thrown at packages/integrations/preact/src/index.ts:110

				];

				addRenderer(getRenderer(command === 'dev'));
				updateConfig({
					vite: viteConfig,
				});

				if (command === 'dev' && devtools) {
					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.',
					);
				}
			},
		},
	};
}

function configEnvironmentPlugin(compat: boolean | undefined): Plugin {
	return {
		name: '@astrojs/preact:environment',
		configEnvironment(environmentName, options) {
			const environmentOptions: EnvironmentOptions = {
				optimizeDeps: {},
				resolve: {},
			};

			if (environmentName === 'client') {

View on GitHub (pinned to 52e6c34790)

Solutions

  1. Scope each JSX integration to its file globs: preact({ include: ['**/preact/**'] }) and react({ include: ['**/react/**'] }) (or exclude the other framework's directories).
  2. If only one framework is actually used, remove the unused renderer integration from config.
  3. Restart the dev server (config hooks run at startup) and confirm the warning is gone.
  4. See the linked docs section 'Combining multiple JSX frameworks' for the recommended glob layout.

Example fix

// before
export default defineConfig({
  integrations: [preact(), react()],
});

// after
export default defineConfig({
  integrations: [
    preact({ include: ['**/preact/**'], exclude: ['**/react/**'] }),
    react({ include: ['**/react/**'], exclude: ['**/preact/**'] }),
  ],
});
Defensive patterns

Strategy: validation

Validate before calling

const jsxIntegrations = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
const enabled = config.integrations.filter((i) => jsxIntegrations.includes(i.name));
if (enabled.length > 1 && !(preactOptions.include || preactOptions.exclude)) {
  throw new Error('Multiple JSX renderers require include/exclude scopes on preact()');
}

Prevention

When it happens

Trigger: astro.config.mjs registers both preact() and react() (or solid()) as integrations, and the preact() call has no include/exclude option. The astro:config:done hook counts 2+ known JSX renderers and logs the warning.

Common situations: Incrementally migrating a React site to Preact (both adapters installed temporarily); design systems mixing React components into a Preact app; examples/demos that install several renderer integrations at once.

Related errors


AI-assisted analysis of withastro/astro@52e6c34790 (2026-08-18). Data as JSON: /api/errors/3f6fca7e2ccfa292. Report an issue: GitHub.