Skip to main content

Wrongly mounted <Composition>

Problem

You are facing the following error:

<Composition> mounted inside another composition.
<Composition> mounted inside another composition.

or, inside a player:

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

Solution

In the Remotion Preview

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

tsx
const MyComp: React.FC = () => {
return (
<Composition
id="another-comp"
width={1080}
height={1080}
durationInFrames={30}
fps={30}
component={AnotherComp}
/>
);
};
 
const Index: React.FC = () => {
return (
<Composition
id="my-comp"
width={1080}
height={1080}
durationInFrames={30}
fps={30}
component={MyComp}
/>
);
};
tsx
const MyComp: React.FC = () => {
return (
<Composition
id="another-comp"
width={1080}
height={1080}
durationInFrames={30}
fps={30}
component={AnotherComp}
/>
);
};
 
const Index: 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
const MyComp: React.FC = () => {
return (
<Composition
durationInFrames={300}
fps={30}
width={1080}
height={1080}
id="another-component"
component={AnotherComp}
/>
);
};
 
const Index: React.FC = () => {
return (
<Player
durationInFrames={300}
fps={30}
compositionWidth={1080}
compositionHeight={1080}
component={MyComp}
/>
);
};
tsx
const MyComp: React.FC = () => {
return (
<Composition
durationInFrames={300}
fps={30}
width={1080}
height={1080}
id="another-component"
component={AnotherComp}
/>
);
};
 
const Index: 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 Preview.

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
const Index: React.FC = () => {
return (
<Player
durationInFrames={300}
fps={30}
compositionWidth={1080}
compositionHeight={1080}
component={AnotherComp}
/>
);
};
tsx
const Index: React.FC = () => {
return (
<Player
durationInFrames={300}
fps={30}
compositionWidth={1080}
compositionHeight={1080}
component={AnotherComp}
/>
);
};

See also