remotion-dev/remotion · error · TypeError

You have passed a playbackRate of type ${typeof props.playba

Error message

You have passed a playbackRate of type ${typeof props.playbackRate} to your <${component} /> component. Playback rate must a real number or undefined.

What it means

validateMediaProps throws a TypeError when the `playbackRate` prop is neither a number nor undefined (e.g. string, object, null, boolean). Playback rate must be a real positive number or omitted. This guard catches untyped data flowing into <Audio>/<Video> playbackRate.

Source

Thrown at packages/core/src/validate-media-props.ts:31

		typeof props.volume !== 'function' &&
		typeof props.volume !== 'undefined'
	) {
		throw new TypeError(
			`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.`,
		);
	}

	if (typeof props.volume === 'number' && props.volume < 0) {
		throw new TypeError(
			`You have passed a volume below 0 to your <${component} /> component. Volume must be between 0 and 1`,
		);
	}

	if (
		typeof props.playbackRate !== 'number' &&
		typeof props.playbackRate !== 'undefined'
	) {
		throw new TypeError(
			`You have passed a playbackRate of type ${typeof props.playbackRate} to your <${component} /> component. Playback rate must a real number or undefined.`,
		);
	}

	if (
		typeof props.playbackRate === 'number' &&
		(isNaN(props.playbackRate) ||
			!Number.isFinite(props.playbackRate) ||
			props.playbackRate <= 0)
	) {
		throw new TypeError(
			`You have passed a playbackRate of ${props.playbackRate} to your <${component} /> component. Playback rate must be a real number above 0.`,
		);
	}

	if (
		typeof props.preservePitch !== 'boolean' &&
		typeof props.preservePitch !== 'undefined'

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Coerce to number: `playbackRate={Number(rawRate)}`.
2. Validate the type before passing: `typeof r === 'number' ? r : undefined`.
3. Omit the prop if you do not have a valid number.
4. Tighten the source type so playbackRate is `number | undefined`.

Example fix

// before
<Video src={url} playbackRate={config.rate} /> // config.rate is "2"

// after
<Video src={url} playbackRate={Number(config.rate)} />

const rate = typeof rawRate === 'string' ? Number(rawRate) : rawRate;
if (rate != null && typeof rate !== 'number') {
  throw new TypeError('invalid playbackRate');
}

const isValidRate = (r: unknown): r is number | undefined =>
  r === undefined || typeof r === 'number';

When it happens

Trigger: Passing playbackRate="2" (string), playbackRate={null}, playbackRate={fast:true}, or any non-number from config/URL/JSON sources.

Common situations: Reading playbackRate from a URL param or form field (string); deserializing config; loose-typed prop chains; passing a string like '1.5'.

Related errors

• You have passed a volume of type ${typeof props.volume} to y
• You have passed a playbackRate of ${props.playbackRate} to y
• You have passed a volume below 0 to your <${component} /> co
• Argument passed for "frame" is not a number: ${frame}
• 'preservePitch' must be a boolean or undefined but got '${ty

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