remotion-dev/remotion · error · TypeError

type of trimBefore prop must be a number, instead got type $

Error message

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

What it means

The `trimBefore` prop (the non-deprecated replacement for startFrom) on media components must be a number representing the frame to begin playback from. validateTrimProps checks the runtime type because values from props, config files, or JSON may arrive as strings.

Source

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

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

	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(

View on GitHub (pinned to 78fe4bb3fd)

Solutions

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

Example fix

// before
<Video src={src} trimBefore="60" />
// after
<Video src={src} trimBefore={60} />

Defensive patterns

Strategy: type-guard

Validate before calling

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

Type guard

const isTrimBefore = (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 trimBefore as a string (trimBefore="60"), an object, or any non-number non-undefined value to a media component.

Common situations: Reading trimBefore from a JSON scene descriptor or CMS where numbers are serialized as strings; passing a value from URL params without conversion; migrating from startFrom but forgetting to convert the type.

Related errors

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