{"record":{"id":"f16bedbb5d0b09e7","repo":"remotion-dev/remotion","slug":"composition-mounted-inside-another-composition","errorCode":null,"errorMessage":"<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.","messagePattern":"<Composition> mounted inside another composition\\. See https://remotion\\.dev/docs/wrong-composition-mount for help\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/Composition.tsx","lineNumber":178,"sourceCode":"\tconst environment = useRemotionEnvironment();\n\n\tconst canUseComposition = useContext(CanUseRemotionHooks);\n\n\t// Record seen composition IDs as early as possible so that overlays can access them\n\tif (typeof window !== 'undefined') {\n\t\twindow.remotion_seenCompositionIds = Array.from(\n\t\t\tnew Set([...(window.remotion_seenCompositionIds ?? []), id]),\n\t\t);\n\t}\n\n\tif (canUseComposition) {\n\t\tif (isPlayer) {\n\t\t\tthrow new Error(\n\t\t\t\t'<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.',\n\t\t\t);\n\t\t}\n\n\t\tthrow new Error(\n\t\t\t'<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.',\n\t\t);\n\t}\n\n\tconst {folderName, parentName} = useContext(FolderContext);\n\tconst stack =\n\t\t(compProps as {readonly _remotionInternalStack?: string})\n\t\t\t._remotionInternalStack ?? null;\n\tconst componentFromProps =\n\t\t'component' in compProps ? compProps.component : null;\n\n\tuseEffect(() => {\n\t\t// Ensure it's a URL safe id\n\t\tif (!id) {\n\t\t\tthrow new Error('No id for composition passed.');\n\t\t}\n\n\t\tvalidateCompositionId(id);","sourceCodeStart":160,"sourceCodeEnd":196,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/Composition.tsx#L160-L196","documentation":"Thrown by <Composition> when it mounts inside another <Composition> (not a Player). Composition registration must happen at the root; nesting a <Composition> inside another composition's render tree is invalid and would double-register/loop the render graph.","triggerScenarios":"Rendering a <Composition> element within the JSX of the `component` prop of another <Composition>. The CanUseRemotionHooks context (non-player branch) detects this and throws.","commonSituations":"Trying to compose one video inside another by embedding <Composition> JSX; reusing a root component as a child component; misunderstanding the registration-vs-render boundary.","solutions":["Register each <Composition> only at the top level of the <Root>.","To combine videos, render the inner composition's component directly (extracted), not the <Composition> wrapper.","See https://remotion.dev/docs/wrong-composition-mount."],"exampleFix":"// before\n<Composition id=\"Outer\" component={() => (\n  <>\n    <MyInnerVideo />\n    <Composition id=\"Inner\" component={Inner} .../> // throws\n  </>\n)} .../>\n\n// after\n<Composition id=\"Outer\" component={() => <MyInnerVideo />} .../>\n<Composition id=\"Inner\" component={Inner} .../> // registered at root, not nested","handlingStrategy":"type-guard","validationCode":"// Ensure each <Composition> is registered only at the <Root> level,\n// and composition components render plain JSX, never <Composition>.","typeGuard":"null","tryCatchPattern":"null","preventionTips":["Register every <Composition> directly inside <Composition Root>.","Extract reusable video components and render them, not <Composition> wrappers.","Lint against rendering <Composition> inside another component."],"tags":["typescript","remotion","composition","react","misuse","nesting"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}