remotion-dev/remotion · error · Error

A value of `undefined` was passed to the `component` prop. C

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.

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)

Solutions

1. Verify the imported component is defined: log it or add a TypeScript check before passing it.
2. Fix the import (switch default <-> named) to match what the module actually exports.
3. 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} ... />;

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} />;

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

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

• A value of `undefined` was passed to the `lazyComponent` pro
• <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/2f352244ba3283c4. Report an issue: GitHub.