remotion-dev/remotion · error · TypeError

The "loop" prop must be a boolean or undefined, but is "${JS

Error message

The "loop" prop must be a boolean or undefined, but is "${JSON.stringify(loop)}"

What it means

validateLoop rejects any `loop` prop that is not undefined or a strict boolean. Lottie's loop behavior is binary, so passing a number (a legacy lottie-web convention like loop:3) or a string will not behave as expected and is rejected up front.

Source

Thrown at packages/lottie/src/validate-loop.ts:7

export const validateLoop = (loop: unknown) => {
	if (typeof loop === 'undefined') {
		return;
	}

	if (typeof loop !== 'boolean') {
		throw new TypeError(
			`The "loop" prop must be a boolean or undefined, but is "${JSON.stringify(
				loop,
			)}"`,
		);
	}
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Pass a boolean: `loop={true}` or omit it.
  2. If you need a finite loop count, drive it via the Remotion timeline (sequence the <Lottie> per loop) rather than a numeric prop.
  3. Coerce config values with Boolean() before passing.

Example fix

// before
<Lottie animationData={anim} loop={3} />
// after
<Lottie animationData={anim} loop={true} />
Defensive patterns

Strategy: type-guard

Validate before calling

function asLoop(v: unknown): boolean | undefined {
  return typeof v === 'boolean' ? v : undefined;
}

Type guard

const isLoopable = (v: unknown): v is boolean => typeof v === 'boolean';

Prevention

When it happens

Trigger: Passing loop as a number (e.g. 3 from old lottie-web examples), 'true' string, or null.

Common situations: Copying lottie-web snippets that use numeric loop counts; reading loop from a JSON config where it arrives as 1/0 instead of true/false.

Related errors


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