Fix: No Matching Renderer Found in Astro

Astro shows “No matching renderer found” when you render a component from a UI framework (a .jsx, .tsx, .vue or .svelte file) without that framework’s integration installed. The message reads “Unable to render” the component, followed by “No valid renderer was found for the” file extension, and usually suggests which integration you meant. Install it with npx astro add react (or vue, svelte, solid-js, preact) and restart the dev server.

Key Takeaways

• Each UI framework needs its Astro integration: @astrojs/react, @astrojs/vue, @astrojs/svelte, @astrojs/solid-js or @astrojs/preact.
• npx astro add <framework> installs it and updates astro.config.mjs.
• Using two JSX frameworks (React and Preact, or React and Solid) needs include patterns so Astro knows which owns which file.
• Restart astro dev after changing integrations.

Fix: add the integration

npx astro add react

That installs @astrojs/react, react and react-dom, and adds the integration:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

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

Now this works:

---
import Counter from '../components/Counter.tsx';
---
<Counter client:visible />

For other frameworks:

File	Command
.jsx / .tsx (React)	npx astro add react
.jsx / .tsx (Preact)	npx astro add preact
.jsx / .tsx (Solid)	npx astro add solid
.vue	npx astro add vue
.svelte	npx astro add svelte

Two JSX frameworks in one project

React, Preact and Solid all use .jsx/.tsx. If you install more than one, tell each integration which files it owns:

import react from '@astrojs/react';
import solid from '@astrojs/solid-js';

export default defineConfig({
  integrations: [
    react({ include: ['**/react/**'] }),
    solid({ include: ['**/solid/**'] }),
  ],
});

Then keep components in src/components/react/ and src/components/solid/. Without include, Astro may pick the wrong renderer and fail with this or a hydration error. Shipping two frameworks also ships two runtimes; the bundle size tip shows how to see what that costs.

It’s installed but still failing

• Check the integration is actually in the integrations array, not just in package.json.
• Restart the dev server; integrations aren’t hot-reloaded.
• Check the import path ends in the right extension. Importing a .tsx file with a typo’d path can surface as a renderer error.
• For client:only, pass the framework name: client:only="react". Without it, see Missing hint on client:only directive.

Do you need a framework at all?

If the component has no state or event handlers, rewrite it as an .astro component. It needs no integration and ships no JavaScript. The Astro components guide explains when an island is worth it, and the framework components docs cover each integration.

FAQ

Can I use React components in Astro without client directives?

Yes. Without a directive, the component renders to static HTML on the server and ships no JavaScript. You still need the React integration installed.

Does Astro support Angular components?

Not through an official integration. Community integrations exist; check the Astro integrations directory for current options.