{"record":{"id":"ebd0fae208c2f1b4","repo":"withastro/astro","slug":"unable-to-render-result-pathname-because-it-con-ebd0fa","errorCode":null,"errorMessage":"Unable to render ${result.pathname} because it contains an undefined Component!\nDid you forget to import the component or is it possible there is a typo?","messagePattern":"Unable to render (.+?) because it contains an undefined Component!\nDid you forget to import the component or is it possible there is a typo\\?","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/astro/src/runtime/server/render/streaming.ts","lineNumber":125,"sourceCode":"\t};\n\n\t// Render function for a dynamic node into a (buffered) destination.\n\tconst renderDynamic =\n\t\t(node: unknown) =>\n\t\t(d: RenderDestination): void | Promise<void> => {\n\t\t\tif (isVNode(node)) {\n\t\t\t\treturn renderJSX(result, node).then((out) => renderChild(d, out));\n\t\t\t}\n\t\t\treturn renderChild(d, node);\n\t\t};\n\n\t// Handle an astro:jsx VNode (JSX in .astro files and MDX/.md pages). Emits\n\t// HTML elements as static, pushes children, and routes components through\n\t// the dynamic path.\n\tconst handleVNode = (vnode: AstroVNode) => {\n\t\tconst type = vnode.type as unknown;\n\t\tif (!type) {\n\t\t\tthrow new Error(\n\t\t\t\t`Unable to render ${result.pathname} because it contains an undefined Component!\\nDid you forget to import the component or is it possible there is a typo?`,\n\t\t\t);\n\t\t}\n\n\t\t// Fragment: process its children.\n\t\tif ((type as any) === Fragment) {\n\t\t\tstack.push(vnode.props?.children);\n\t\t\treturn;\n\t\t}\n\n\t\t// Astro component factory (including `server:defer` islands).\n\t\tif (isAstroComponentFactory(type)) {\n\t\t\tconst props: Record<string, unknown> = {};\n\t\t\tconst slots: Record<string, number | any> = {};\n\t\t\tfor (const [key, value] of Object.entries(vnode.props ?? {})) {\n\t\t\t\tif (\n\t\t\t\t\tkey === 'children' ||\n\t\t\t\t\t(value && typeof value === 'object' && (value as any)['$$slot'])","sourceCodeStart":107,"sourceCodeEnd":143,"githubUrl":"https://github.com/withastro/astro/blob/e294953aa8aadd98d5be92e60a03037b05dbdfd4/packages/astro/src/runtime/server/render/streaming.ts#L107-L143","documentation":"Thrown from Astro's streaming JSX renderer when a vnode's type is falsy — the component reference being rendered evaluated to undefined. Astro renders JSX from .astro templates and MDX/MD pages by looking up each element's constructor; an undefined one means the name used in markup was never bound to a real component. Typical causes are a typo, a missing import, an import/export shape mismatch, or a circular import that leaves the binding undefined at render time.","triggerScenarios":"Rendering <TypoComp /> where the identifier is misspelled or never imported; import { Header } from './Header.astro' when the module only has a default export (or vice versa); an MDX/.md page using a component passed via the components={{...}} prop with a wrong key; a circular import chain (A imports B imports A) leaving the binding undefined on first render; a component looked up from a map that returned undefined.","commonSituations":"Renaming an export but not all usages; file-name casing that works on macOS/Windows but breaks on Linux CI (./header.astro vs ./Header.astro); components fetched from data maps that can be absent; refactors that accidentally introduce import cycles between .astro frontmatter and compiled islands.","solutions":["Open the page named in the error (result.pathname) and find the JSX element whose component is undefined: verify the import exists and the tag matches it exactly","Check the import shape: .astro and most framework components are default exports (import Header from './Header.astro'), not named exports","Verify file-name casing matches the filesystem exactly","If imports look correct, look for a circular import and move the shared code into a third module","Run astro check (or tsc) to catch missing or misspelled exports before rendering"],"exampleFix":"// before — Header.astro has a default export\nimport { Header } from './Header.astro';\n<html><body><Header /></body></html>\n\n// after\nimport Header from './Header.astro';\n<html><body><Header /></body></html>","handlingStrategy":"type-guard","validationCode":"---\n// dynamic component lookup in frontmatter\nimport { isRenderableComponent } from '../lib/guards';\nconst Comp = registry[name];\n---\n{isRenderableComponent(Comp) ? <Comp {...props} /> : <p>Unknown component: {name}</p>}","typeGuard":"type Renderable = (...args: any[]) => any;\nconst isRenderableComponent = (c: unknown): c is Renderable =>\n\ttypeof c === 'function' || (typeof c === 'object' && c !== null && 'render' in c);","tryCatchPattern":null,"preventionTips":["Run astro check (astro check / tsc) in CI to catch missing and misspelled exports before render time","Use exact file-name casing in imports so code works on case-sensitive Linux CI","Avoid dynamic component lookups without a fallback branch; guard them with a type guard","Watch for circular imports when extracting shared helpers out of .astro frontmatter"],"tags":["jsx","undefined-component","import","typo","circular-import"],"backgroundTag":"undefined-component-import","analyzedSha":"e294953aa8aadd98d5be92e60a03037b05dbdfd4","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}