Wrongly mounted <Composition>

Problem

You are facing the following error:

<Composition> mounted inside another composition.

or, inside a player:

'<Composition> was mounted inside the `component` that was passed to the <Player>.'

Solution

In the Remotion Studio

The cause for the error is that a <Composition> was nested inside the component that was passed to another <Composition>.

❌
tsx
constMyComp:React.FC= () => {
return (
 <Composition
id="another-comp"
width={1080}
height={1080}
durationInFrames={30}
fps={30}
component={AnotherComp}
 />
 );
};
constIndex:React.FC= () => {
return (
 <Composition
id="my-comp"
width={1080}
height={1080}
durationInFrames={30}
fps={30}
component={MyComp}
 />
 );
};

note

There is no reason to nest compositions in Remotion.

Do you want to include a component in another? Mount it directly instead by writing: <AnotherComp />
Do you want to limit the duration or time-shift another component? Look into <Sequence>.

To fix it, you must remove the nested compositions.

In the Remotion Player

The cause for the error is that in the component you passed in to the component prop of Remotion Player, you are returning a <Composition>.

❌
tsx
constMyComp:React.FC= () => {
return (
 <Composition
durationInFrames={300}
fps={30}
width={1080}
height={1080}
id="another-component"
component={AnotherComp}
 />
 );
};
constIndex:React.FC= () => {
return (
 <Player
durationInFrames={300}
fps={30}
compositionWidth={1080}
compositionHeight={1080}
component={MyComp}
 />
 );
};

note

There is no use for compositions in <Player>. Only use them during rendering and when using the Remotion Studio.

To fix it, pass the component directly to the player's component prop and provide the durationInFrames, fps, compositionHeight and compositionWidth props to the player.

✅
tsx
constIndex:React.FC= () => {
return (
 <Player
durationInFrames={300}
fps={30}
compositionWidth={1080}
compositionHeight={1080}
component={AnotherComp}
 />
 );
};

Problem​

Solution​

In the Remotion Studio​

In the Remotion Player​

See also​

Problem

Solution

In the Remotion Studio

In the Remotion Player

See also