What causes "No id for composition passed." in remotion-dev/remotion?

Add a non-empty string `id` prop to every in your Root (e.g. `id="MyVideo"`).

remotion-dev/remotion · error · Error

No id for composition passed.

Error message

No id for composition passed.

What it means

Thrown inside a useEffect of the <Composition> component when the required `id` prop is falsy (undefined, null, empty string). The id is used as a URL-safe composition key and as the lookup key for rendering, CLI selection, and Studio routing, so an empty id would break every downstream feature. Remotion validates this lazily at mount time (inside useEffect) so that the error surfaces only after React commits the composition, rather than during render.

Source

Thrown at packages/core/src/Composition.tsx:193

			);
		}

		throw new Error(
			'<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.',
		);
	}

	const {folderName, parentName} = useContext(FolderContext);
	const stack =
		(compProps as {readonly _remotionInternalStack?: string})
			._remotionInternalStack ?? null;
	const componentFromProps =
		'component' in compProps ? compProps.component : null;

	useEffect(() => {
		// Ensure it's a URL safe id
		if (!id) {
			throw new Error('No id for composition passed.');
		}

		validateCompositionId(id);
		validateDefaultAndInputProps(defaultProps, 'defaultProps', id);
		registerComposition<Schema, Props>({
			durationInFrames: durationInFrames ?? undefined,
			fps: fps ?? undefined,
			height: height ?? undefined,
			width: width ?? undefined,
			id,
			folderName,
			component: lazy,
			defaultProps: serializeThenDeserializeInStudio(
				(defaultProps ?? {}) as z.output<Schema> & Props,
			) as InferProps<Schema, Props>,
			nonce: nonce.get(),
			parentFolderName: parentName,
			componentFromProps,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Add a non-empty string `id` prop to every <Composition> in your Root (e.g. `id="MyVideo"`).
If the id is computed, guard the render with `{data && <Composition id={data.slug} ... />}` so it never mounts with a falsy id.
Run `bunx remotion compositions` to list registered compositions; any missing id will surface before you render.
Check that props are not being spread in a way that overwrites `id` with undefined.

Example fix

// before
<Composition component={MyVideo} durationInFrames={120} fps={30} width={1920} height={1080} />
// after
<Composition id="my-video" component={MyVideo} durationInFrames={120} fps={30} width={1920} height={1080} />

Defensive patterns

Strategy: type-guard

Validate before calling

// Before rendering the Composition
const compositionId: unknown = maybeId;
if (typeof compositionId !== 'string' || compositionId.length === 0) {
  throw new Error(`Invalid composition id: ${String(compositionId)}`);
}
return <Composition id={compositionId} ... />;

Type guard

const isCompositionId = (v: unknown): v is string =>
  typeof v === 'string' && v.length > 0 && /^[A-Za-z0-9-_]+$/.test(v);

Prevention

Type your Composition list so `id` is a required non-empty string.
Generate Root.tsx from a typed schema so missing ids fail at compile time.
Run `bunx remotion compositions` in CI to assert every composition has a valid id.
Never spread `{...rest}` onto <Composition> without an explicit `id={...}` line.

When it happens

Trigger: Declaring `<Composition />` without an `id` prop, or passing `id={undefined}`/`id={''}`/`id={null}`. This commonly happens when the id is computed from a variable that is undefined at first render, or when spreading props where `id` was never set.

Common situations: Refactoring a composition and forgetting to carry the `id` prop; mapping over data and using an index that resolves to undefined; copying a Composition block and deleting the id line by mistake.

Related errors

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