remotion-dev/remotion · error · TypeError

trimBefore prop can not be NaN or Infinity.

Error message

trimBefore prop can not be NaN or Infinity.

What it means

Even when trimBefore is a number, validateTrimProps rejects NaN and Infinity because neither represents a valid frame offset. NaN typically comes from a failed Number() conversion; Infinity comes from division by zero. Both would yield undefined seek behavior.

Source

Thrown at packages/core/src/validate-start-from-props.ts:58

	if ((endAt as number) < (startFrom as number)) {
		throw new TypeError('endAt prop must be greater than startFrom prop.');
	}
};

export const validateTrimProps = (
	trimBefore: number | undefined,
	trimAfter: number | undefined,
) => {
	if (typeof trimBefore !== 'undefined') {
		if (typeof trimBefore !== 'number') {
			throw new TypeError(
				`type of trimBefore prop must be a number, instead got type ${typeof trimBefore}.`,
			);
		}

		if (isNaN(trimBefore) || trimBefore === Infinity) {
			throw new TypeError('trimBefore prop can not be NaN or Infinity.');
		}

		if (trimBefore < 0) {
			throw new TypeError(
				`trimBefore must be greater than equal to 0 instead got ${trimBefore}.`,
			);
		}
	}

	if (typeof trimAfter !== 'undefined') {
		if (typeof trimAfter !== 'number') {
			throw new TypeError(
				`type of trimAfter prop must be a number, instead got type ${typeof trimAfter}.`,
			);
		}

		if (isNaN(trimAfter)) {
			throw new TypeError('trimAfter prop can not be NaN.');

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Guard the value with Number.isFinite() before passing: trimBefore={Number.isFinite(v) ? v : undefined}.
  2. Fix the upstream parse with a format check (regex/parseInt) before Number().
  3. Omit the prop when the dynamic value cannot be guaranteed finite.

Example fix

// before
const trimBefore = Number(userInput); // may be NaN
<Video src={src} trimBefore={trimBefore} />
// after
const raw = Number(userInput);
const trimBefore = Number.isFinite(raw) ? raw : undefined;
<Video src={src} trimBefore={trimBefore} />
Defensive patterns

Strategy: validation

Validate before calling

if (trimBefore !== undefined && !Number.isFinite(trimBefore)) {
  throw new Error('trimBefore must be a finite number');
}

Type guard

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

Prevention

When it happens

Trigger: Passing trimBefore={NaN} (e.g. Number('abc')), trimBefore={Infinity} (e.g. 1/0), or any expression evaluating to NaN/Infinity.

Common situations: Parsing user/CMS input with Number() that returns NaN; computing trimBefore with a division where the divisor can be zero; spreading unvalidated external props.

Related errors


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