remotion-dev/remotion · error · Error

A value of `undefined` was passed to the `lazyComponent` pro

Error message

A value of `undefined` was passed to the `lazyComponent` prop. Check the value you are passing to the <${componentName}/> component.

What it means

useLazyComponent() resolves the lazyComponent prop for code-split compositions. NOTE: in the current source this branch is effectively unreachable - the outer condition already requires `typeof compProps.lazyComponent !== 'undefined'`, so the inner check that throws can never be true. If you ever see this error, you are likely on a forked or older version where the guards differ; on main, the real failure mode for a missing lazyComponent is the separate "You must pass either 'component' or 'lazyComponent'" error.

Source

Thrown at packages/core/src/use-lazy-component.ts:79

			}

			const Wrapper = (props: Props) => {
				const Comp = componentRef.current!;
				return React.createElement(
					Comp as React.ComponentType<{}>,
					props as {},
				);
			};

			return Wrapper as ComponentType<Props>;
		}

		if (
			'lazyComponent' in compProps &&
			typeof compProps.lazyComponent !== 'undefined'
		) {
			if (typeof compProps.lazyComponent === 'undefined') {
				throw new Error(
					`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`,
				);
			}

			return React.lazy(
				compProps.lazyComponent as () => Promise<{
					default: ComponentType<Props>;
				}>,
			);
		}

		throw new Error("You must pass either 'component' or 'lazyComponent'");

		// Very important to leave the dependencies as they are, or instead
		// the player will remount on every frame.
		// For the 'component' case, we intentionally do NOT depend on
		// compProps.component — the stable wrapper reads from componentRef instead.

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. If you genuinely hit this, upgrade or realign to upstream @remotion/core and reproduce - the modern code path emits a different message.
2. Ensure you pass a real lazy loader (e.g. `lazyComponent={() => import('./Video')}`) and not undefined.
3. If neither component nor lazyComponent is right, expect 'You must pass either component or lazyComponent' instead.

Example fix

// before
<Composition id="x" lazyComponent={undefined} ... />;

// after
<Composition id="x" lazyComponent={() => import('./Video')} ... />;

const lazyVideo = () => import('./Video');

if (typeof lazyVideo !== 'function') {
  throw new Error('lazyComponent must be a function');
}

<Composition id="x" lazyComponent={lazyVideo} durationInFrames={30} fps={30} width={1920} height={1080} />;

const isLazyLoader = (
  v: unknown,
): v is () => Promise<{default: React.ComponentType<any>}> =>
  typeof v === 'function';

When it happens

Trigger: On the current source: not reachable through normal API use. On forks/older versions: passing `<Composition lazyComponent={undefined} />` with the lazyComponent key present but undefined.

Common situations: Custom forks of Remotion that changed the guard ordering; older versions where this branch was reachable; static analysis tools flagging the throw without noting the dead-code surrounding it.

Related errors

• A value of `undefined` was passed to the `component` prop. C
• <Composition> was mounted inside the `component` that was pa
• <Composition> mounted inside another composition. See https:
• TimelineContext is not available. This hook must be used ins
• useCurrentFrame() can only be called inside a component that

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/04481f587a855588. Report an issue: GitHub.