{"record":{"id":"89c1b562313a7971","repo":"withastro/astro","slug":"nomatchingrenderer","errorCode":"NoMatchingRenderer","errorMessage":"Unable to render `${componentName}`.\n\nThere ${plural ? 'are' : 'is'} ${validRenderersCount} renderer${plural ? 's' : ''} configured in your `astro.config.mjs` file,\nbut ${plural ? 'none were' : 'it was not'} able to server-side render `${componentName}`.","messagePattern":"Unable to render `(.+?)`\\.\n\nThere (.+?) (.+?) renderer(.+?) configured in your `astro\\.config\\.mjs` file,\nbut (.+?) able to server-side render `(.+?)`\\.","errorType":"exception","errorClass":"AstroError","httpStatus":null,"severity":"error","filePath":"packages/astro/src/runtime/server/render/component.ts","lineNumber":204,"sourceCode":"\t\tif (!renderer && metadata.hydrateArgs) {\n\t\t\tconst rendererName = metadata.hydrateArgs;\n\t\t\tif (typeof rendererName === 'string') {\n\t\t\t\trenderer = renderers.find(({ name }) => name === rendererName);\n\t\t\t}\n\t\t}\n\t}\n\n\tlet componentServerRenderEndTime;\n\t// If no one claimed the renderer\n\tif (!renderer) {\n\t\tif (metadata.hydrate === 'only') {\n\t\t\tconst rendererName = rendererAliases.has(metadata.hydrateArgs)\n\t\t\t\t? rendererAliases.get(metadata.hydrateArgs)\n\t\t\t\t: metadata.hydrateArgs;\n\t\t\tif (clientOnlyValues.has(rendererName)) {\n\t\t\t\t// throw an error if provide correct client:only directive but not find the renderer\n\t\t\t\tconst plural = validRenderers.length > 1;\n\t\t\t\tthrow new AstroError({\n\t\t\t\t\t...AstroErrorData.NoMatchingRenderer,\n\t\t\t\t\tmessage: AstroErrorData.NoMatchingRenderer.message(\n\t\t\t\t\t\tmetadata.displayName,\n\t\t\t\t\t\tmetadata?.componentUrl?.split('.').pop(),\n\t\t\t\t\t\tplural,\n\t\t\t\t\t\tvalidRenderers.length,\n\t\t\t\t\t),\n\t\t\t\t\thint: AstroErrorData.NoMatchingRenderer.hint(\n\t\t\t\t\t\tformatList(probableRendererNames.map((r) => '`' + r + '`')),\n\t\t\t\t\t),\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// throw an error if an invalid hydration directive was provided\n\t\t\t\tthrow new AstroError({\n\t\t\t\t\t...AstroErrorData.NoClientOnlyHint,\n\t\t\t\t\tmessage: AstroErrorData.NoClientOnlyHint.message(metadata.displayName),\n\t\t\t\t\thint: AstroErrorData.NoClientOnlyHint.hint(\n\t\t\t\t\t\tprobableRendererNames.map((r) => r.replace('@astrojs/', '')).join('|'),","sourceCodeStart":186,"sourceCodeEnd":222,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/astro/src/runtime/server/render/component.ts#L186-L222","documentation":"The component is `client:only=\"<name>\"`, the hint matched a known client-only value (so the user gave a real framework name), but none of the configured renderers claim that framework. Astro throws `NoMatchingRenderer`: it knows which framework you intended but the matching integration isn't installed/enabled. The hint suggests probable renderer package names.","triggerScenarios":"`client:only=\"vue\"` without `@astrojs/vue` added to `astro.config`; `client:only=\"svelte\"` with the Svelte integration not installed; the renderer integration is installed but not registered in `astro.config.mjs`.","commonSituations":"New project that hasn't yet added the framework integration; integration removed/disabled; SSR adapter present but framework integration missing.","solutions":["Install and register the matching framework integration (`astro add react`, or add `@astrojs/vue` to `integrations` in config).","Verify the renderer appears in your `astro.config` integrations list.","Rebuild after adding the integration."],"exampleFix":"// before — client:only=\"vue\" but @astrojs/vue not configured\n<VueCounter client:only=\"vue\" />\n\n// after — add the integration\nimport vue from '@astrojs/vue';\nexport default defineConfig({ integrations: [vue()] });","handlingStrategy":"validation","validationCode":"// Verify a renderer is registered for the client:only hint before relying on it\nfunction assertRendererInstalled(renderers: string[], hint: string): void {\n  const want = `@astrojs/${hint}`;\n  if (!renderers.some((r) => r === want || r === hint)) {\n    throw new Error(`No renderer configured for client:only=\"${hint}\". Install ${want}.`);\n  }\n}","typeGuard":"const hasRendererFor = (renderers: string[], hint: string): boolean =>\n  renderers.some((r) => r === `@astrojs/${hint}` || r === hint);","tryCatchPattern":null,"preventionTips":["Add the framework integration (`astro add <framework>`) before using `client:only`.","Keep renderers list in `astro.config` in sync with `client:only` hints.","Rebuild after adding an integration."],"tags":["client-only","renderer","integration","hydration"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}