{"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/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro/src/runtime/server/render/component.ts#L65-L101","documentation":"Before server-rendering a framework component, renderFrameworkComponent checks that it received something to render. If Component is falsy and the element does not carry client:only (which skips SSR entirely by design), Astro throws, telling you the component resolved to undefined and suggesting a missing import or typo. This is the framework-component counterpart of the undefined-vnode error in the JSX runtime.","triggerScenarios":"A typo'd named import from a .jsx/.tsx/.vue/.svelte file; a component library export that was renamed or is not exported; const Component = map[name] returning undefined; an undefined value passed as a JSX component in an .astro file.","commonSituations":"Upgrading a component library that renamed exports; barrel re-export omissions; dynamic component maps (icons, CMS-driven blocks) with missing keys; named/default import confusion.","solutions":["Verify the component is actually exported under that name from its module (named vs default)","Guard dynamic lookups: const C = registry[name] ?? Fallback;","Fix barrel files so the referenced export is re-exported","Note that client:only only defers the failure to the browser; fix the import instead"],"exampleFix":"// before\nimport { Buton } from './Button.jsx';\n<Buton client:load />\n\n// after\nimport { Button } from './Button.jsx';\n<Button client:load />","handlingStrategy":"type-guard","validationCode":"const Widget = registry[name];\nif (!Widget) {\n  throw new Error('Unknown framework component in registry: ' + name);\n}\n<Widget client:load />","typeGuard":"function isRenderableComponent(C: unknown): C is (props: any) => any {\n  return typeof C === 'function' || (typeof C === 'object' && C !== null);\n}","tryCatchPattern":null,"preventionTips":["Verify the export exists (named vs default) before adding client:* directives","Provide fallbacks for map/registry-driven components","Keep barrel files complete when components are added or renamed"],"tags":["astro","framework-component","undefined-component","import","ssr"],"backgroundTag":"undefined-component","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"}