remotion-dev/remotion · error · Error

<Composition> was mounted inside the `component` that was pa

Error message

<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.

What it means

Thrown by <Composition> when it mounts inside the `component` prop passed to <Player>. Compositions must be registered at the top level of a Remotion root, not nested inside a player's render component; mounting one there is a structural mistake that breaks the player's render model.

Source

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

	});

	const nonce = useNonce();

	const isPlayer = useIsPlayer();
	const environment = useRemotionEnvironment();

	const canUseComposition = useContext(CanUseRemotionHooks);

	// Record seen composition IDs as early as possible so that overlays can access them
	if (typeof window !== 'undefined') {
		window.remotion_seenCompositionIds = Array.from(
			new Set([...(window.remotion_seenCompositionIds ?? []), id]),
		);
	}

	if (canUseComposition) {
		if (isPlayer) {
			throw new Error(
				'<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.',
			);
		}

		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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pass a plain presentational component to <Player> — never one that registers <Composition>s.
2. Keep <Composition> registration strictly inside the Remotion <Root>.
3. See https://remotion.dev/docs/wrong-composition-mount.

Example fix

// before
<Player
  component={MyRoot} // MyRoot contains <Composition>
  .../>

// after
<Player
  component={MyVideo} // a pure video component, no <Composition> inside
  .../>

// Ensure the component passed to <Player> contains no <Composition>.
// Player components should be pure presentational components, not Root registrations.

function isPlainPlayerComponent(comp: React.FC<any>): boolean {
  // Static review: the component must not import or render <Composition>.
  // Enforce via eslint-rule 'no-restricted-imports' blocking @remotion/core's Composition in player components.
  return true;
}

null

When it happens

Trigger: Passing a `component` to <Player> whose JSX includes a <Composition> element. The CanUseRemotionHooks + isPlayer context flags this exact misconfiguration.

Common situations: Reusing a Root component (which lists <Composition>s) as a Player component; wrapping a <Player> inside a <Composition>; copy-paste of root registration code into a player component.

Related errors

• <Composition> mounted inside another composition. See https:
• <Clipper> has been removed as of Remotion v4.0.228. The nati
• TimelineContext is not available. This hook must be used ins
• `_experimentalKeepAudioContextAlive` cannot be changed dynam
• The number of shared audio tags has changed dynamically. Onc

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