{"record":{"id":"e4fa8e8d430d50a4","repo":"withastro/astro","slug":"more-than-one-jsx-renderer-is-enabled-this-will-l-e4fa8e","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/integrations/vue/src/index.ts","lineNumber":220,"sourceCode":"\t\thooks: {\n\t\t\t'astro:config:setup': async ({ addRenderer, updateConfig, command }) => {\n\t\t\t\taddRenderer(getContainerRendererImpl());\n\t\t\t\tif (options?.jsx) {\n\t\t\t\t\taddRenderer(getJsxRenderer());\n\t\t\t\t}\n\t\t\t\tupdateConfig({ vite: await getViteConfiguration(command, options) });\n\t\t\t},\n\t\t\t'astro:config:done': ({ logger, config }) => {\n\t\t\t\tif (!options?.jsx) return;\n\n\t\t\t\tconst knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];\n\t\t\t\tconst enabledKnownJsxRenderers = config.integrations.filter((renderer) =>\n\t\t\t\t\tknownJsxRenderers.includes(renderer.name),\n\t\t\t\t);\n\n\t\t\t\t// This error can only be thrown from here since Vue is an optional JSX renderer\n\t\t\t\tif (enabledKnownJsxRenderers.length > 1 && !options?.include && !options?.exclude) {\n\t\t\t\t\tlogger.warn(\n\t\t\t\t\t\t'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.',\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t};\n}\n","sourceCodeStart":202,"sourceCodeEnd":228,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/integrations/vue/src/index.ts#L202-L228","documentation":"When the Vue integration is configured with `jsx: true`, Vue itself becomes a JSX renderer competing with other JSX-based renderers. In its `astro:config:done` hook (packages/integrations/vue/src/index.ts:220) it checks `config.integrations` for more than one of @astrojs/react, @astrojs/preact, @astrojs/solid-js; if two or more are present and you passed neither `include` nor `exclude` to the Vue integration, it warns that JSX files may be compiled by the wrong framework. Without include/exclude globs, every `.jsx/.tsx` file goes through whichever renderer Vite resolves first, so a Solid page can silently render with React's `createElement` (or vice versa), producing broken hydration or runtime errors.","triggerScenarios":"`astro.config.mjs` has `vue({ jsx: true })` (or the JSX option enabled) AND at least two of @astrojs/react, @astrojs/preact, @astrojs/solid-js are in `integrations`, AND the Vue integration options contain neither `include` nor `exclude`. The check runs once during `astro dev`/`astro build` startup in `astro:config:done`. Note Vue is special-cased as the only place this can warn, because it is an optional JSX renderer; if only one other JSX renderer is enabled, no warning fires.","commonSituations":"A mixed-framework design-system or migration repo (e.g. incrementally moving React pages to Solid while both integrations stay installed) that also adds Vue with JSX support; monorepos where a shared config file lists many integrations; adding a new JSX framework dependency for one component without removing the old integration from the config.","solutions":["Scope the Vue JSX rendering with include/exclude globs so each JSX variant only compiles its own files, e.g. `vue({ jsx: true, include: ['**/*.vue', '**/*.jsx'] })` combined with equivalent `include` on the other renderers.","If you no longer need one of the JSX frameworks, remove its integration from `astro.config` and uninstall the package — the conflict disappears.","Use file extensions or directory conventions to partition frameworks (e.g. `.tsx` for React under `src/react/`, `.jsx` for Vue under `src/vue/`) and reflect them in each renderer's include/exclude, per the linked solid-js guide."],"exampleFix":"// before\nimport vue from '@astrojs/vue';\nimport react from '@astrojs/react';\nimport solid from '@astrojs/solid-js';\n\nexport default defineConfig({\n  integrations: [vue({ jsx: true }), react(), solid()],\n});\n\n// after\nexport default defineConfig({\n  integrations: [\n    vue({ jsx: true, include: ['**/*.vue', '**/vue/**/*.jsx'] }),\n    react({ include: ['**/*.tsx', '**/react/**'] }),\n    solid({ include: ['**/solid/**'] }),\n  ],\n});","handlingStrategy":"validation","validationCode":"// sanity-check the resolved Astro config before building\n// (run via `astro config`-style inspection or by loading the config with the Astro CLI)\nconst jsxRenderers = config.integrations\n  .map((i) => i.name)\n  .filter((n) => ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'].includes(n));\nconst vueOptionsIncludeExclude = /* your vue() include/exclude options */;\nif (jsxRenderers.length > 1 && !vueOptionsIncludeExclude) {\n  throw new Error('Set include/exclude on vue({ jsx: true }) — multiple JSX renderers enabled');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Whenever more than one JSX-capable integration is installed, always set `include` (or `exclude`) on every one of them — an unscoped JSX renderer is the actual defect the warning points at.","Adopt a directory or extension convention per framework (e.g. `src/react/**/*.tsx` vs `src/solid/**/*.tsx`) and encode it in each integration's include globs.","Remove integrations for frameworks you no longer render; 'just in case' integrations are what create silent wrong-renderer compilation.","Smoke-test one component per framework after config changes — wrong-renderer JSX usually breaks hydration rather than the build itself."],"tags":["vue","jsx","multiple-renderers","config","react","preact","solid","astro-integration"],"backgroundTag":"conflicting-jsx-renderers","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}