remotion-dev/remotion · error · TypeError

You passed to "times" an argument of type ${typeof times}, b

Error message

You passed to "times" an argument of type ${typeof times}, but it must be a number.

What it means

Thrown by the <Loop> component when its times prop is not a number. The prop defaults to Infinity (a number), so this only fires when an explicit non-number value — string, boolean, object, null — is passed. It is checked after validateDurationInFrames so the duration is already known valid.

Source

Thrown at packages/core/src/loop/index.tsx:53

	useLoop: typeof useLoop;
} = ({
	durationInFrames,
	times = Infinity,
	children,
	name,
	showInTimeline,
	...props
}) => {
	const currentFrame = useCurrentFrame();
	const {durationInFrames: compDuration} = useVideoConfig();

	validateDurationInFrames(durationInFrames, {
		component: 'of the <Loop /> component',
		allowFloats: true,
	});

	if (typeof times !== 'number') {
		throw new TypeError(
			`You passed to "times" an argument of type ${typeof times}, but it must be a number.`,
		);
	}

	if (times !== Infinity && times % 1 !== 0) {
		throw new TypeError(
			`The "times" prop of a loop must be an integer, but got ${times}.`,
		);
	}

	if (times < 0) {
		throw new TypeError(
			`The "times" prop of a loop must be at least 0, but got ${times}`,
		);
	}

	const maxTimes = Math.ceil(compDuration / durationInFrames);
	const actualTimes = Math.min(maxTimes, times);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pass times as a numeric literal, e.g. <Loop durationInFrames={30} times={3}>.
2. Coerce the source value with Number() before passing it.
3. Omit times entirely to keep the default Infinity (loop for the whole composition).

Example fix

// before
<Loop durationInFrames={30} times={"3"}>{children}</Loop>
// after
<Loop durationInFrames={30} times={Number(rawTimes)}>{children}</Loop>

if (times !== undefined && typeof times !== 'number') {
  throw new Error('times must be a number');
}
return <Loop durationInFrames={30} times={times}>{children}</Loop>;

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

When it happens

Trigger: <Loop durationInFrames={30} times="3">; <Loop durationInFrames={30} times={'3'}>; times sourced from JSON/props as a string and passed uncoerced; times bound to a DOM input value (string).

Common situations: Reading times from a config file or URL query string (always string); form inputs that yield strings; passing a React state variable typed loosely.

Related errors

• The <Freeze /> component requires a 'frame' prop, but none w
• The 'frame' prop of <Freeze /> must be a number, but is of t
• The 'frame' prop of <Freeze /> must be a real number, but it
• The 'frame' prop of <Freeze /> must be a finite number, but
• The "times" prop of a loop must be an integer, but got ${tim

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