remotion-dev/remotion · error · Error

A value of `undefined` was passed to the `component` prop…

Error message

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

What it means

useLazyComponent() resolves the component/lazyComponent prop of higher-level Remotion components like <Composition>, <Still>, <Sequence>, or <Player>. When `component` is present but undefined, the lazy wrapper cannot be built and the hook throws, naming the offending component so you can locate the bad prop.

Solutions

Verify the imported component is defined: log it or add a TypeScript check before passing it.
Fix the import (switch default <-> named) to match what the module actually exports.
Break circular imports by moving the component into its own module or lazy-loading it.

Example fix

// before
import {MyVideo} from './MyVideo'; // wrong: MyVideo is a default export
<Composition id="x" component={MyVideo} ... />;

// after
import MyVideo from './MyVideo';
<Composition id="x" component={MyVideo} ... />;

Defensive patterns

Strategy: type-guard

Validate before calling

import MyVideo from './MyVideo';

if (typeof MyVideo !== 'function') {
  throw new Error('MyVideo import is undefined - check the import style');
}

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

Type guard

const isComponent = (v: unknown): v is React.ComponentType<any> =>
  typeof v === 'function';

Prevention

Double-check named vs default imports after adding or moving a component.
Break circular imports by isolating composition components in their own files.
Add a TypeScript assertion that the component prop is a non-undefined ComponentType.

When it happens

Trigger: Passing `<Composition component={undefined} />` (or <Still>, <Player>, etc.), often because the imported component is undefined due to a missing or misnamed import, or a conditional that yields undefined.

Common situations: Named/default import mismatch (`import {Foo}` vs `import Foo`); circular imports that resolve to undefined at first render; dynamic component selection where one branch returns undefined; tree-shaking removing an unused-looking export.

Related errors

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

Appendix: source

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

	// (e.g. change volume={1} to volume={2}) and save. Without this fix,
	// Component would fully remount instead of fast-refreshing in place.
	const componentRef = useRef<ComponentType<Props> | null>(null);

	if ('component' in compProps) {
		componentRef.current = compProps.component as ComponentType<Props>;
	}

	const lazy = useMemo(() => {
		if ('component' in compProps) {
			// In SSR, suspense is not yet supported, we cannot use React.lazy
			if (typeof document === 'undefined' || noSuspense) {
				return compProps.component as unknown as React.LazyExoticComponent<
					ComponentType<Props>
				>;
			}

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

			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'

View on GitHub (pinned to 78fe4bb3fd)