remotion-dev/remotion · error · Error

The "durationInFrames" prop ${component} must be a number, b

Error message

The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}

What it means

`validateDurationInFrames` requires `durationInFrames` to be a `number`. A defined-but-non-number value (string, object, array, boolean) throws 'must be a number'. This is distinct from the missing/undefined case.

Source

Thrown at packages/core/src/validation/validate-duration-in-frames.ts:14

export function validateDurationInFrames(
	durationInFrames: unknown,
	options: {
		component: string;
		allowFloats: boolean;
	},
): asserts durationInFrames is number {
	const {allowFloats, component} = options;
	if (typeof durationInFrames === 'undefined') {
		throw new Error(`The "durationInFrames" prop ${component} is missing.`);
	}

	if (typeof durationInFrames !== 'number') {
		throw new Error(
			`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`,
		);
	}

	if (durationInFrames <= 0) {
		throw new TypeError(
			`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`,
		);
	}

	if (!allowFloats && durationInFrames % 1 !== 0) {
		throw new TypeError(
			`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`,
		);
	}

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Pass a numeric literal or coerce: `durationInFrames={Number(value)}`.
  2. Type the prop as `number` so TypeScript flags mismatches.
  3. Parse string sources with `parseInt`/`Number` and validate.

Example fix

// before
const dur = inputProps.duration; // '150'
<Composition durationInFrames={dur} ... />
// after
const dur = Number(inputProps.duration);
<Composition durationInFrames={dur} ... />
Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof d !== 'number') { throw new Error('duration must be a number'); }

Type guard

const isDurationNumber = (d) => typeof d === 'number';

Prevention

When it happens

Trigger: Passing `durationInFrames` as a string (`'150'`) or any non-number type to `<Composition>`, `<Series.Sequence>`, or `<Loop>`; or `calculateMetadata` returning a string duration.

Common situations: Reading duration from props/config/env as a string and passing it through; JSON input props where duration was serialized as a string; a refactor that changes the type.

Related errors


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