{"record":{"id":"55aa7061c02ab5e8","repo":"remotion-dev/remotion","slug":"it-is-not-supported-to-pass-both-a-ref-and-layo","errorCode":null,"errorMessage":"It is not supported to pass both a `ref` and `layout=\"none\"` to <Sequence />.","messagePattern":"It is not supported to pass both a `ref` and `layout=\"none\"` to <Sequence />\\.","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/Sequence.tsx","lineNumber":621,"sourceCode":"\t\t[ref],\n\t);\n\n\tconst defaultStyle: React.CSSProperties = useMemo(() => {\n\t\treturn {\n\t\t\tflexDirection: undefined,\n\t\t\t...(width ? {width} : {}),\n\t\t\t...(height ? {height} : {}),\n\t\t\t...(styleIfThere ?? {}),\n\t\t\t...(cropClipPath\n\t\t\t\t? {\n\t\t\t\t\t\tclipPath: cropClipPath,\n\t\t\t\t\t}\n\t\t\t\t: {}),\n\t\t};\n\t}, [cropClipPath, height, styleIfThere, width]);\n\n\tif (ref !== null && layout === 'none') {\n\t\tthrow new TypeError(\n\t\t\t'It is not supported to pass both a `ref` and `layout=\"none\"` to <Sequence />.',\n\t\t);\n\t}\n\n\tif (hidden) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SequenceContext.Provider value={contextValue}>\n\t\t\t{frozenContent === null ? null : other.layout === 'none' ? (\n\t\t\t\tfrozenContent\n\t\t\t) : (\n\t\t\t\t<AbsoluteFillElement\n\t\t\t\t\tref={sequenceRef}\n\t\t\t\t\tstyle={defaultStyle}\n\t\t\t\t\tclassName={other.className}\n\t\t\t\t>","sourceCodeStart":603,"sourceCodeEnd":639,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/Sequence.tsx#L603-L639","documentation":"Thrown when both a ref and layout=\"none\" are passed to <Sequence>. layout=\"none\" renders the sequence children without a wrapping DOM element, so there is no element for a forwarded ref to attach to; the combination is contradictory.","triggerScenarios":"Passing ref={myRef} alongside layout=\"none\" on the same <Sequence>. Often happens when refactoring a regular sequence to layout=\"none\" while leaving an existing ref in place.","commonSituations":"Migrating to layout=\"none\" for performance while forgetting to remove ref usage; using a shared component that always forwards a ref.","solutions":["Remove the ref from the <Sequence> when using layout=\"none\".","Drop layout=\"none\" and use the default layout if you need a ref to the wrapper element.","Wrap the sequence in an outer element and attach the ref there."],"exampleFix":"// before\n<Sequence ref={seqRef} layout=\"none\">...</Sequence>\n\n// after\n<Sequence layout=\"none\">...</Sequence>\n// or attach ref to an outer wrapper:\n<div ref={seqRef}><Sequence layout=\"none\">...</Sequence></div>","handlingStrategy":"validation","validationCode":"// before render, ensure not both are set\nif (ref && layout === 'none') {\n  throw new Error('Cannot use ref with layout=\"none\"');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Document internal wrappers that layout=\"none\" sequences should not receive a ref.","Lint for ref + layout=\"none\" combos in shared components."],"tags":["sequence","ref","layout","props"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}