remotion-dev/remotion · error · TypeError

If layout="none", you may not pass a style. Passed: ${JSON.s

Error message

If layout="none", you may not pass a style. Passed: ${JSON.stringify(other.style)}

What it means

Thrown by <Sequence> when `layout="none"` is set and a `style` prop is provided. With layout="none", <Sequence> does not render its own positioning wrapper (the parent owns layout), so any style passed would have no element to attach to and would be silently dropped. The error makes that silent drop visible.

Source

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

		(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,
		right: resolvedCropRight,
		top: resolvedCropTop,
		bottom: resolvedCropBottom,
	} = resolveSequenceCrop(cropProps);
	// @ts-expect-error
	if (layout === 'none' && typeof other.style !== 'undefined') {
		throw new TypeError(
			'If layout="none", you may not pass a style. Passed: ' +
				// @ts-expect-error
				JSON.stringify(other.style),
		);
	}

	if (typeof durationInFrames !== 'number') {
		throw new TypeError(
			`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`,
		);
	}

	if (durationInFrames <= 0) {
		throw new TypeError(
			`durationInFrames must be positive, but got ${durationInFrames}`,
		);
	}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Remove the `style` prop when using `layout="none"`.
2. If you need styling, switch to `layout="absolute-fill"` and pass style on the Sequence, or wrap the layout="none" Sequence in your own styled element.
3. Filter style out of shared props before forwarding to a layout="none" Sequence.
4. Type-check with a discriminated union so style is only allowed with the absolute-fill layout.

Example fix

// before
<Sequence layout="none" style={{backgroundColor: 'red'}} durationInFrames={30} />
// after
<Sequence layout="none" durationInFrames={30} />

if (layout === 'none' && typeof style !== 'undefined') {
  throw new TypeError('Cannot pass style with layout="none"');
}

const isStyleFree = (style: unknown): boolean => typeof style === 'undefined';

When it happens

Trigger: Passing `layout="none"` plus `style={{...}}`; spreading a shared props object that includes style into a layout="none" Sequence; copying a styled Sequence and changing its layout to 'none'.

Common situations: Reusing Sequence wrappers that always carry style; refactoring to embed a Sequence in a custom layout but leaving the style prop in place.

Related errors

• The layout prop of <Sequence /> expects either "absolute-fil
• The cropLeft, cropRight, cropTop and cropBottom props of <Se
• You passed to durationInFrames an argument of type ${typeof
• You passed to the "from" props of your <Sequence> an argumen
• You passed to the "trimBefore" prop of your <Sequence> an ar

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