remotion-dev/remotion · error · TypeError

The layout prop of <Sequence /> expects either "absolute-fil

Error message

The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}

What it means

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.

Source

Thrown at packages/core/src/Sequence.tsx:174

		cropLeft,
		cropRight,
		cropTop,
		cropBottom,
		...other
	},
	ref,
) => {
	const {layout = 'absolute-fill'} = other;

	const [id] = useState(() => String(Math.random()));
	const parentSequence = useContext(SequenceContext);
	const cumulatedFrom = parentSequence
		? parentSequence.cumulatedFrom + parentSequence.relativeFrom
		: 0;
	const nonce = useNonce();

	if (layout !== 'absolute-fill' && layout !== 'none') {
		throw new TypeError(
			`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`,
		);
	}

	const cropProps = {cropLeft, cropRight, cropTop, cropBottom};
	const hasCropProp = Object.values(cropProps).some(
		(value) => value !== undefined,
	);

	if (layout === 'none' && hasCropProp) {
		throw new TypeError(
			'The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout="absolute-fill".',
		);
	}

	validateSequenceCrop(cropProps);
	const {
		left: resolvedCropLeft,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Use one of the two allowed literals: `layout="absolute-fill"` or `layout="none"`.
2. If you want the default, simply omit the prop.
3. If passing a dynamic value, constrain its type with a union: `type Layout = 'absolute-fill' | 'none'`.
4. Search for typos: 'absolutefill' (missing hyphen), 'None', 'Absolute-Fill'.

Example fix

// before
<Sequence layout="relative" durationInFrames={30} />
// after
<Sequence layout="absolute-fill" durationInFrames={30} />
// or simply
<Sequence durationInFrames={30} />

const SEQUENCE_LAYOUTS = new Set(['absolute-fill', 'none']);
if (!SEQUENCE_LAYOUTS.has(layout)) {
  throw new TypeError(`Invalid Sequence layout: ${String(layout)}`);
}

const isSequenceLayout = (v: unknown): v is 'absolute-fill' | 'none' =>
  v === 'absolute-fill' || v === 'none';

When it happens

Trigger: 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"`.

Common situations: Confusing the layout prop with CSS position values; passing a state-driven value that may temporarily be unset; copy-paste with a typo.

Related errors

• The cropLeft, cropRight, cropTop and cropBottom props of <Se
• If layout="none", you may not pass a style. Passed: ${JSON.s
• You passed to the "trimBefore" prop of your <Sequence> an ar
• You passed to durationInFrames an argument of type ${typeof
• You passed to the "from" props of your <Sequence> an argumen

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/4ebd0521548485e3. Report an issue: GitHub.