remotion-dev/remotion · error · TypeError

"${name}" must be a finite number

Error message

"${name}" must be a finite number

What it means

`assertOptionalFiniteNumber` runs for every optional numeric field of `MetallicSwirlParams` (time, speed, zoom, iterations, sampleGap, tangentForce, gradientForce, colorPhaseR/G/B, colorRange, colorBias, brightness, opacity). `undefined` is allowed (the field is optional), but any other non-number, or any non-finite number (Infinity/NaN), throws. The message names the offending field.

Source

Thrown at packages/brand/src/effects/metallic-swirl-effect.ts:281

const assertParamsObject = (
	params: MetallicSwirlParams,
	name: string,
): void => {
	if (params === null || typeof params !== 'object' || Array.isArray(params)) {
		throw new TypeError(`${name} params must be an object`);
	}
};

const assertOptionalFiniteNumber = (
	value: unknown,
	name: keyof MetallicSwirlParams,
): void => {
	if (value === undefined) {
		return;
	}

	if (typeof value !== 'number' || !Number.isFinite(value)) {
		throw new TypeError(`"${name}" must be a finite number`);
	}
};

const validateRange = (
	value: number,
	name: keyof MetallicSwirlParams,
	min: number,
	max: number,
): void => {
	if (value < min || value > max) {
		throw new TypeError(`"${name}" must be between ${min} and ${max}`);
	}
};

const assertOptionalEnum = <T extends string>(
	value: unknown,
	name: keyof MetallicSwirlParams,
	variants: readonly T[],

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Coerce numeric strings: `metallicSwirl({speed: Number(raw.speed)})`.
2. Use `undefined` (or omit the key) to mean 'unset', never `null`.
3. Guard computed values: `Number.isFinite(v) ? v : undefined`.
4. Type the params as `MetallicSwirlParams` so non-numbers are flagged.

Example fix

// before
metallicSwirl({speed: formData.speed}); // formData.speed is a string

// after
metallicSwirl({speed: Number(formData.speed)});

// Coerce/validate optional numeric params before passing.
const optionalFinite = (v: unknown): number | undefined => {
  if (v === undefined || v === null) return undefined;
  const n = typeof v === 'number' ? v : Number(v);
  if (!Number.isFinite(n)) {
    throw new Error(`Expected a finite number, got ${JSON.stringify(v)}`);
  }
  return n;
};
metallicSwirl({speed: optionalFinite(raw.speed)});

type OptionalFinite = number | undefined;

const isOptionalFinite = (v: unknown): v is OptionalFinite =>
  v === undefined || (typeof v === 'number' && Number.isFinite(v));

When it happens

Trigger: `metallicSwirl({speed: '2'})` (string), `metallicSwirl({zoom: true})` (boolean), `metallicSwirl({opacity: null})`, `metallicSwirl({brightness: Infinity})`, `metallicSwirl({iterations: NaN})`, or passing a value from `parseFloat` that returned NaN.

Common situations: Numeric values arriving as strings from forms, URL params, or JSON without coercion; division producing Infinity/NaN upstream; booleans used as 0/1 stand-ins; null used to mean 'unset' instead of omitting the key.

Related errors

• ${name} params must be an object
• "${name}" must be between ${min} and ${max}
• "${name}" must be one of ${variants.join(', ')}
• "backgroundColor" must be a string
• "colorA" must be a string

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