remotion-dev/remotion · error · TypeError

type of trimAfter prop must be a number, instead got type ${

Error message

type of trimAfter prop must be a number, instead got type ${typeof trimAfter}.

What it means

The `trimAfter` prop (the non-deprecated replacement for endAt) on media components must be a number representing the frame at which playback stops. validateTrimProps checks the runtime type because values destructured from props, configs, or JSON may arrive as strings rather than numbers.

Source

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

			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.');
		}

		if (trimAfter <= 0) {
			throw new TypeError(
				`trimAfter must be a positive number, instead got ${trimAfter}.`,
			);
		}
	}

	if ((trimAfter as number) <= (trimBefore as number)) {
		throw new TypeError('trimAfter prop must be greater than trimBefore prop.');
	}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Pass trimAfter as a numeric literal: trimAfter={200}.
If the value is a string, parse and validate it: trimAfter={Number(myStr)} after a finiteness check.
Omit the prop if you do not need to cap the end.

Example fix

// before
<Audio src={src} trimAfter="180" />
// after
<Audio src={src} trimAfter={180} />

Defensive patterns

Strategy: type-guard

Validate before calling

if (trimAfter !== undefined && typeof trimAfter !== 'number') {
  throw new Error('trimAfter must be a number or undefined');
}

Type guard

const isTrimAfter = (v: unknown): v is number | undefined =>
  v === undefined || typeof v === 'number';

Prevention

Type the prop as number | undefined in wrapper components.
Parse string sources with Number() and validate before passing.
Keep scene/config descriptors typed so numbers are not serialized as strings.

When it happens

Trigger: Passing trimAfter as a string (trimAfter="200"), an object, or any non-number non-undefined value to a media component.

Common situations: Reading trimAfter from a JSON scene descriptor or CMS where numbers are serialized as strings; passing a value from URL query params without conversion.

Related errors

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