{"record":{"id":"af5ee23d8e6e6b5c","repo":"withastro/astro","slug":"unable-to-render-displayname-because-it-is-co","errorCode":null,"errorMessage":"Unable to render ${displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?","messagePattern":"Unable to render (.+?) because it is (.+?)!\nDid you forget to import the component or is it possible there is a typo\\?","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/astro/src/runtime/server/render/component.ts","lineNumber":83,"sourceCode":"}\n\nconst ASTRO_SLOT_EXP = /<\\/?astro-slot\\b[^>]*>/g;\nconst ASTRO_STATIC_SLOT_EXP = /<\\/?astro-static-slot\\b[^>]*>/g;\n\nfunction removeStaticAstroSlot(html: string, supportsAstroStaticSlot = true) {\n\tconst exp = supportsAstroStaticSlot ? ASTRO_STATIC_SLOT_EXP : ASTRO_SLOT_EXP;\n\treturn html.replace(exp, '');\n}\n\nasync function renderFrameworkComponent(\n\tresult: SSRResult,\n\tdisplayName: string,\n\tComponent: unknown,\n\t_props: Record<string | number, any>,\n\tslots: any = {},\n): Promise<RenderInstance> {\n\tif (!Component && 'client:only' in _props === false) {\n\t\tthrow new Error(\n\t\t\t`Unable to render ${displayName} because it is ${Component}!\\nDid you forget to import the component or is it possible there is a typo?`,\n\t\t);\n\t}\n\n\tconst { renderers, clientDirectives } = result;\n\tconst metadata: AstroComponentMetadata = {\n\t\tastroStaticSlot: true,\n\t\tdisplayName,\n\t};\n\n\tconst { hydration, isPage, props, propsWithoutTransitionAttributes } = extractDirectives(\n\t\t_props,\n\t\tclientDirectives,\n\t);\n\tlet html = '';\n\tlet attrs: Record<string, string> | undefined = undefined;\n\n\tif (hydration) {","sourceCodeStart":65,"sourceCodeEnd":101,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/astro/src/runtime/server/render/component.ts#L65-L101","documentation":"`renderFrameworkComponent` is called for every framework (React/Vue/Svelte/etc.) component. If the `Component` reference is falsy AND the element does not declare `client:only`, Astro throws — it has no component to render and no instruction to skip server rendering. The message reports the displayName and the falsy value.","triggerScenarios":"A framework component variable is `undefined`/`null` (missing import, typo, failed resolution) and the tag is not `client:only`; importing a named export that doesn't exist so the binding is undefined; conditional component that resolved to undefined.","commonSituations":"Forgot to import the framework component; named/default import mismatch; renamed export without updating the import; integration/render-processor that stripped the binding.","solutions":["Import the component correctly (matching default vs named export).","Fix typos in the component identifier.","If the component truly can only run in the browser, add `client:only=\"<framework>\"` so Astro skips server rendering."],"exampleFix":"// before — named import doesn't exist, binding is undefined\nimport { NotExported } from './Button.tsx';\n<NotExported />\n\n// after\nimport Button from './Button.tsx';\n<Button />","handlingStrategy":"type-guard","validationCode":"function assertFrameworkComponent(Comp: unknown, displayName: string): void {\n  if (!Comp && !arguments[2]) {\n    throw new Error(`Cannot render '${displayName}': component is undefined`);\n  }\n}","typeGuard":"const isRenderableComponent = (v: unknown): boolean =>\n  typeof v === 'function' || typeof v === 'string' || typeof v === 'object';\n\n// In template: only render when defined\n{Comp ? <Comp /> : null}","tryCatchPattern":null,"preventionTips":["Import framework components with the correct default/named form.","Add `client:only=\"<framework>\"` for browser-only components instead of leaving them undefined.","Use strict TypeScript to catch undefined bindings at compile time."],"tags":["framework-components","undefined-component","render","renderer"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}