withastro/astro · error · Error

Unable to render ${result.pathname} because it contains an u

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

In the streaming JSX renderer (`handleVNode`), a VNode reached processing with a falsy `type`. The VNode `type` is the component function/class/tag; falsy means the component reference is `undefined`. This is the streaming-path equivalent of the jsx.ts undefined-component error and reports the current `result.pathname`.

Source

Thrown at packages/astro/src/runtime/server/render/streaming.ts:119

	};

	// Render function for a dynamic node into a (buffered) destination.
	const renderDynamic =
		(node: unknown) =>
		(d: RenderDestination): void | Promise<void> => {
			if (isVNode(node)) {
				return renderJSX(result, node).then((out) => renderChild(d, out));
			}
			return renderChild(d, node);
		};

	// Handle an astro:jsx VNode (JSX in .astro files and MDX/.md pages). Emits
	// HTML elements as static, pushes children, and routes components through
	// the dynamic path.
	const handleVNode = (vnode: AstroVNode) => {
		const type = vnode.type as unknown;
		if (!type) {
			throw new Error(
				`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?`,
			);
		}

		// Fragment: process its children.
		if ((type as any) === Fragment) {
			stack.push(vnode.props?.children);
			return;
		}

		// Astro component factory (including `server:defer` islands).
		if (isAstroComponentFactory(type)) {
			const props: Record<string, unknown> = {};
			const slots: Record<string, number | any> = {};
			for (const [key, value] of Object.entries(vnode.props ?? {})) {
				if (
					key === 'children' ||
					(value && typeof value === 'object' && (value as any)['$$slot'])

View on GitHub (pinned to d081033d5f)

Solutions

Import the component with the correct name and form.
Verify the identifier is defined and not shadowed at the call site.
Provide a fallback for dynamic component selection so the tag is never undefined.

Example fix

// before
const Tag = registry[name]; // undefined when name is unknown
<Tag />

// after
const Tag = registry[name] ?? Fragment;
<Tag />

Defensive patterns

Strategy: type-guard

Validate before calling

function assertVNodeComponent(type: unknown, pathname: string): void {
  if (!type) {
    throw new Error(`Page ${pathname} contains an undefined component`);
  }
}

Type guard

const isDefinedComponent = (v: unknown): v is Function | string =>
  typeof v === 'function' || typeof v === 'string';

// Dynamic tag with safe fallback
const Tag = isDefinedComponent(Maybe) ? Maybe : Fragment;

Prevention

Import every component statically.
Default dynamic tag lookups to `Fragment` or a placeholder.
Use strict TypeScript to surface undefined identifiers.

When it happens

Trigger: An undefined variable used as a JSX tag in a streaming page; a dynamic component selector that resolved to undefined; a named import that doesn't exist; a refactoring that left a dangling identifier.

Common situations: Missing import; conditional component selection with no fallback; named/default import mismatch; shadowed identifier resolving to undefined.

Related errors

AI-assisted analysis of withastro/astro@d081033d5f (2026-08-12). Data as JSON: /api/errors/ebd0fae208c2f1b4. Report an issue: GitHub.