remotion-dev/remotion · error · TypeError

You passed to the "trimBefore" prop of your <Sequence> an ar

Error message

You passed to the "trimBefore" prop of your <Sequence> an argument of type ${typeof trimBefore}, but it must be a number.

What it means

Thrown by <Sequence> when its trimBefore prop is not a number. trimBefore offsets the sequence start by trimming leading frames; a non-number breaks the frame arithmetic (effectiveRelativeFrom = from - trimBefore) so Remotion refuses to render.

Source

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

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

	if (typeof from !== 'number') {
		throw new TypeError(
			`You passed to the "from" props of your <Sequence> an argument of type ${typeof from}, but it must be a number.`,
		);
	}

	if (!Number.isFinite(from)) {
		throw new TypeError(
			`The "from" prop of a sequence must be finite, but got ${from}.`,
		);
	}

	if (typeof trimBefore !== 'number') {
		throw new TypeError(
			`You passed to the "trimBefore" prop of your <Sequence> an argument of type ${typeof trimBefore}, but it must be a number.`,
		);
	}

	if (trimBefore < 0) {
		throw new TypeError(
			`The "trimBefore" prop of <Sequence /> must be greater than or equal to 0, but got ${trimBefore}.`,
		);
	}

	if (Number.isNaN(trimBefore)) {
		throw new TypeError(
			'The "trimBefore" prop of <Sequence /> must be a real number, but it is NaN.',
		);
	}

	if (!Number.isFinite(trimBefore)) {
		throw new TypeError(

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Coerce trimBefore to a number before passing: trimBefore={Number(rawTrimBefore)}.
  2. Default the prop when it may be absent: trimBefore={rawTrimBefore ?? 0}.
  3. Validate at the boundary with a type guard and fall back to 0.
  4. Check that the upstream source (config file, props) actually serializes a number.

Example fix

// before
<Sequence from={10} trimBefore={params.trimBefore} />

// after
<Sequence from={10} trimBefore={Number(params.trimBefore) || 0} />
Defensive patterns

Strategy: type-guard

Validate before calling

const safeTrimBefore = (v: unknown): number =>
  typeof v === 'number' && Number.isFinite(v) ? v : 0;

<Sequence trimBefore={safeTrimBefore(raw)} />

Type guard

const isTrimBefore = (v: unknown): v is number =>
  typeof v === 'number' && !Number.isNaN(v) && Number.isFinite(v);

Prevention

When it happens

Trigger: Passing trimBefore as a string (e.g. from a URL param or form input), undefined, null, an object, or NaN to <Sequence>. Typically trimBefore is forwarded from parsed config or props without coercion.

Common situations: Reading trimBefore from query strings, JSON config, or URL params and passing it uncoerced; spreading external props onto <Sequence> whose trimBefore field is optional/omitted.

Related errors


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