{"record":{"id":"0e3c6ffd3d8d99fb","repo":"withastro/astro","slug":"noclientonlyhint","errorCode":"NoClientOnlyHint","errorMessage":"Unable to render `${componentName}`. When using the `client:only` hydration strategy, Astro needs a hint to use the correct renderer.","messagePattern":"Unable to render `(.+?)`\\. When using the `client:only` hydration strategy, Astro needs a hint to use the correct renderer\\.","errorType":"exception","errorClass":"AstroError","httpStatus":null,"severity":"error","filePath":"packages/astro/src/runtime/server/render/component.ts","lineNumber":218,"sourceCode":"\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('|'),\n\t\t\t\t\t),\n\t\t\t\t});\n\t\t\t}\n\t\t} else if (typeof Component !== 'string') {\n\t\t\tconst matchingRenderers = validRenderers.filter((r) =>\n\t\t\t\tprobableRendererNames.includes(r.name),\n\t\t\t);\n\t\t\tconst plural = validRenderers.length > 1;\n\t\t\tif (matchingRenderers.length === 0) {\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(),","sourceCodeStart":200,"sourceCodeEnd":236,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro/src/runtime/server/render/component.ts#L200-L236","documentation":"client:only components are never server-rendered, so Astro needs the value of the directive to pick the client renderer. When the value is missing or not a recognized framework name (not in react, preact, vue, svelte, solid-js after alias resolution), NoClientOnlyHint is thrown with a hint listing valid values derived from your probable renderers.","triggerScenarios":"A bare <Comp client:only /> or client:only={true}; client:only=\"alpine\" or another unsupported framework string; a typo like client:only=\"reactt\"; using a renderer whose name does not match any known alias.","commonSituations":"Copying bare client:only from old docs or examples; assuming Astro infers the framework from the file extension (it does not for client:only); switching frameworks and forgetting to update the hint.","solutions":["Add the framework value: <Comp client:only=\"react\" /> (or preact, vue, svelte, solid)","For solid use client:only=\"solid\" (aliased internally to solid-js)","If using a non-bundled renderer, check its docs for the exact hint string it registers"],"exampleFix":"// before\n<Widget client:only />\n\n// after\n<Widget client:only=\"react\" />","handlingStrategy":"validation","validationCode":"const VALID_HINTS = new Set(['react', 'preact', 'vue', 'svelte', 'solid']);\nif (!VALID_HINTS.has(hint)) {\n  throw new Error('client:only needs one of: ' + [...VALID_HINTS].join(', '));\n}","typeGuard":"function isClientOnlyHint(value: unknown): value is string {\n  return typeof value === 'string' && ['react', 'preact', 'vue', 'svelte', 'solid'].includes(value);\n}","tryCatchPattern":null,"preventionTips":["Always write the framework value: client:only=\"react\"","Treat a bare client:only as a lint error in code review","Update hints when switching frameworks in a project"],"tags":["astro","client-only","hydration","directive"],"backgroundTag":"client-only-without-renderer-hint","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}