remotion-dev/remotion · error · TypeError

Cannot interpolate "${value}" because "${component}" is not

Error message

Cannot interpolate "${value}" because "${component}" is not finite

What it means

Thrown by interpolate's string parser when a component did parse as number-plus-unit but the numeric portion is not finite (NaN or Infinity). This points to an arithmetic or serialization bug producing a non-finite number embedded in the output string.

Source

Thrown at packages/core/src/interpolate.ts:153

const parseStringInterpolationComponent = (
	component: string,
	value: string,
): {
	kind: StringInterpolationKind;
	value: number;
	unit: string | null;
} => {
	const match = cssNumberRegex.exec(component);
	if (match === null) {
		throw new UnsupportedStringInterpolationValueError(
			`Cannot interpolate "${value}" because "${component}" is not a supported scale, translate, or rotate value`,
		);
	}

	const unit = match[2] ?? null;
	const numberValue = Number(match[1]);
	if (!Number.isFinite(numberValue)) {
		throw new TypeError(
			`Cannot interpolate "${value}" because "${component}" is not finite`,
		);
	}

	if (unit === null) {
		return {kind: 'scale', value: numberValue, unit: null};
	}

	if (angleUnits.has(unit)) {
		return {kind: 'rotate', value: numberValue, unit};
	}

	if (lengthUnits.has(unit)) {
		return {kind: 'translate', value: numberValue, unit};
	}

	throw new TypeError(
		`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Clamp or guard the operand so it is always finite before interpolating it into the string.
2. Validate with Number.isFinite on each computed component.
3. Use interpolate()'s extrapolateLeft/Right='clamp' to keep the numeric source in range.

Example fix

// before
const x = numerator / denom; // Infinity when denom === 0
interpolate(frame, [0, 100], [`translateX(${x}px)`, 'translateX(100px)']);

// after
const x = Number.isFinite(numerator / denom) ? numerator / denom : 0;
interpolate(frame, [0, 100], [`translateX(${x}px)`, 'translateX(100px)']);

function buildTransform(n: number, unit: string): string {
  const v = Number.isFinite(n) ? n : 0;
  return `translateX(${v}${unit})`;
}
interpolate(frame, [0, 100], [buildTransform(x, 'px'), 'translateX(100px)']);

const isFiniteComponent = (n: number): boolean => Number.isFinite(n);

When it happens

Trigger: Embedding the result of an unclamped/undefined math operation into a transform string, e.g. `translateX(${x/y}px)` where x/y is Infinity, or template-string interpolation of NaN.

Common situations: Building transform strings from frame math without clamping; division by zero or parsing failures feeding into the string.

Related errors

• Cannot interpolate "${value}" because "${component}" is not
• Cannot interpolate "${value}" because "${unit}" is not a sup
• The start and end values must be of the same type. Start val
• The start and end values must have the same structure. Start
• input ${input} does not end with a valid unit. Valid units a

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