remotion-dev/remotion · error · TypeError

It is not supported to pass both a `ref` and `layout="none"`

Error message

It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.

What it means

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.

Source

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

		[ref],
	);

	const defaultStyle: React.CSSProperties = useMemo(() => {
		return {
			flexDirection: undefined,
			...(width ? {width} : {}),
			...(height ? {height} : {}),
			...(styleIfThere ?? {}),
			...(cropClipPath
				? {
						clipPath: cropClipPath,
					}
				: {}),
		};
	}, [cropClipPath, height, styleIfThere, width]);

	if (ref !== null && layout === 'none') {
		throw new TypeError(
			'It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.',
		);
	}

	if (hidden) {
		return null;
	}

	return (
		<SequenceContext.Provider value={contextValue}>
			{frozenContent === null ? null : other.layout === 'none' ? (
				frozenContent
			) : (
				<AbsoluteFillElement
					ref={sequenceRef}
					style={defaultStyle}
					className={other.className}
				>

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Remove the ref from the <Sequence> when using layout="none".
2. Drop layout="none" and use the default layout if you need a ref to the wrapper element.
3. Wrap the sequence in an outer element and attach the ref there.

Example fix

// before
<Sequence ref={seqRef} layout="none">...</Sequence>

// after
<Sequence layout="none">...</Sequence>
// or attach ref to an outer wrapper:
<div ref={seqRef}><Sequence layout="none">...</Sequence></div>

// before render, ensure not both are set
if (ref && layout === 'none') {
  throw new Error('Cannot use ref with layout="none"');
}

When it happens

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

Common situations: Migrating to layout="none" for performance while forgetting to remove ref usage; using a shared component that always forwards a ref.

Related errors

• The layout prop of <Sequence /> expects either "absolute-fil
• The cropLeft, cropRight, cropTop and cropBottom props of <Se
• If layout="none", you may not pass a style. Passed: ${JSON.s
• `<Sequence>` with `premountFor` and `postmountFor` props doe
• You passed to durationInFrames an argument of type ${typeof

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