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​