withastro/astro · error · Error

Unable to render because it contains an undefined…

Error message

Unable to render ${result.pathname} because it contains an undefined Component!
Did you forget to import the component or is it possible there is a typo?

What it means

Inside the JSX rendering runtime, renderJSXVNode throws when a vnode's type is falsy (undefined or null). That means JSX was created with a component reference that is undefined: the element exists, but there is nothing to render. The message points at the two usual causes: a missing import or a typo in the component name.

Solutions

1. Check the import name against the component file's actual export (default vs named)
2. If the component comes from a registry/map, guard the lookup and provide a fallback component
3. Fix or extend barrel re-exports so the referenced name exists
4. Break import cycles by moving shared code into a third module

Example fix

// before
import { Buton } from './Button.jsx';
<Buton>Hi</Buton>

// after
import { Button } from './Button.jsx';
<Button>Hi</Button>

import * as Icon from './icons.jsx';
const C = Icon[name];
if (!C) throw new Error('Unknown component: ' + name);

function isDefinedComponent(C: unknown): C is React.FC<any> | (() => any) {
  return typeof C === 'function' || (typeof C === 'object' && C !== null);
}

When it happens

Trigger: A named import that does not exist in the source module (import { Buton } from './Button.jsx' when the export is Button); const Component = registry[name] with a missing key; a conditional import that yields undefined; circular imports leaving one binding undefined at render time.

Common situations: Typo'd import names; renamed exports after a library upgrade; component maps (icon registries, MDX component overrides) with missing entries; barrel files that forgot to re-export the component.

Related errors

• Unable to render because it contains an undefined…
• Unable to render because it is ! Did you forget to import…
• Error: invalid hydration directive
• ImageNotFound
• NoImageMetadata

AI-assisted analysis of withastro/astro@e294953aa8 (2026-08-18). Data as JSON: /api/errors/6e15acda473d9731. Report an issue: GitHub.

Appendix: source

Thrown at packages/astro/src/runtime/server/jsx.ts:69

					content += item;
				}
			}
			if (instructions) {
				return markHTMLString(new SlotString(content, instructions));
			}
			return markHTMLString(content);
		}
	}

	return renderJSXVNode(result, vnode);
}

async function renderJSXVNode(result: SSRResult, vnode: AstroVNode): Promise<any> {
	if (isVNode(vnode)) {
		// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
		switch (true) {
			case !vnode.type: {
				throw new Error(`Unable to render ${result.pathname} because it contains an undefined Component!
Did you forget to import the component or is it possible there is a typo?`);
			}
			case (vnode.type as any) === Symbol.for('astro:fragment'):
				return renderJSX(result, vnode.props.children);
			case isAstroComponentFactory(vnode.type): {
				let props: Record<string, any> = {};
				let slots: Record<string, any> = {};
				for (const [key, value] of Object.entries(vnode.props ?? {})) {
					if (key === 'children' || (value && typeof value === 'object' && value['$$slot'])) {
						slots[key === 'children' ? 'default' : key] = () => renderJSX(result, value);
					} else {
						props[key] = value;
					}
				}
				// We don't use renderToString because it doesn't contain the server island script handling
				const str = await renderComponentToString(
					result,
					vnode.type.name,

View on GitHub (pinned to e294953aa8)