{"record":{"id":"4ebd0521548485e3","repo":"remotion-dev/remotion","slug":"the-layout-prop-of-sequence-expects-either-ab","errorCode":null,"errorMessage":"The layout prop of <Sequence /> expects either \"absolute-fill\" or \"none\", but you passed: ${layout}","messagePattern":"The layout prop of <Sequence /> expects either \"absolute-fill\" or \"none\", but you passed: (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/Sequence.tsx","lineNumber":174,"sourceCode":"\t\tcropLeft,\n\t\tcropRight,\n\t\tcropTop,\n\t\tcropBottom,\n\t\t...other\n\t},\n\tref,\n) => {\n\tconst {layout = 'absolute-fill'} = other;\n\n\tconst [id] = useState(() => String(Math.random()));\n\tconst parentSequence = useContext(SequenceContext);\n\tconst cumulatedFrom = parentSequence\n\t\t? parentSequence.cumulatedFrom + parentSequence.relativeFrom\n\t\t: 0;\n\tconst nonce = useNonce();\n\n\tif (layout !== 'absolute-fill' && layout !== 'none') {\n\t\tthrow new TypeError(\n\t\t\t`The layout prop of <Sequence /> expects either \"absolute-fill\" or \"none\", but you passed: ${layout}`,\n\t\t);\n\t}\n\n\tconst cropProps = {cropLeft, cropRight, cropTop, cropBottom};\n\tconst hasCropProp = Object.values(cropProps).some(\n\t\t(value) => value !== undefined,\n\t);\n\n\tif (layout === 'none' && hasCropProp) {\n\t\tthrow new TypeError(\n\t\t\t'The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout=\"absolute-fill\".',\n\t\t);\n\t}\n\n\tvalidateSequenceCrop(cropProps);\n\tconst {\n\t\tleft: resolvedCropLeft,","sourceCodeStart":156,"sourceCodeEnd":192,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/Sequence.tsx#L156-L192","documentation":"Thrown by <Sequence> when the `layout` prop is anything other than the two allowed literals: 'absolute-fill' (default) or 'none'. <Sequence> uses layout to decide whether to wrap children in an absolutely-positioned <div> that fills the parent; an unknown value would silently fall through to undefined layout behavior.","triggerScenarios":"Passing `layout={undefined}` explicitly to override the default; passing `layout=\"relative\"`, `layout=\"\"`, or a dynamic variable that is not one of the two literals; typos like `layout=\"absolutefill\"`.","commonSituations":"Confusing the layout prop with CSS position values; passing a state-driven value that may temporarily be unset; copy-paste with a typo.","solutions":["Use one of the two allowed literals: `layout=\"absolute-fill\"` or `layout=\"none\"`.","If you want the default, simply omit the prop.","If passing a dynamic value, constrain its type with a union: `type Layout = 'absolute-fill' | 'none'`.","Search for typos: 'absolutefill' (missing hyphen), 'None', 'Absolute-Fill'."],"exampleFix":"// before\n<Sequence layout=\"relative\" durationInFrames={30} />\n// after\n<Sequence layout=\"absolute-fill\" durationInFrames={30} />\n// or simply\n<Sequence durationInFrames={30} />","handlingStrategy":"type-guard","validationCode":"const SEQUENCE_LAYOUTS = new Set(['absolute-fill', 'none']);\nif (!SEQUENCE_LAYOUTS.has(layout)) {\n  throw new TypeError(`Invalid Sequence layout: ${String(layout)}`);\n}","typeGuard":"const isSequenceLayout = (v: unknown): v is 'absolute-fill' | 'none' =>\n  v === 'absolute-fill' || v === 'none';","tryCatchPattern":null,"preventionTips":["Type layout as a literal union in wrapper components.","Omit layout when you want the default 'absolute-fill'.","Avoid passing dynamic layout values from unvalidated sources.","Use TypeScript's string-literal types to catch typos at compile time."],"tags":["sequence","layout","props","validation","typescript"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}