remotion-dev/remotion · error · TypeError

input can not be undefined

Error message

input can not be undefined

What it means

Thrown by interpolateColors when the `input` argument is undefined. This is a defensive guard because interpolateColors cannot map an absent input value to a color.

Source

Thrown at packages/core/src/interpolate-colors.ts:701

		}

		return Math.round(unrounded);
	});
	return rgbaColor(r, g, b, a);
};

/*
 * @description Allows you to map a range of values to colors using a concise syntax.
 * @see [Documentation](https://remotion.dev/docs/interpolate-colors)
 */
export const interpolateColors = (
	input: number,
	inputRange: readonly number[],
	outputRange: readonly string[],
	options?: InterpolateColorsOptions,
): string => {
	if (typeof input === 'undefined') {
		throw new TypeError('input can not be undefined');
	}

	if (typeof inputRange === 'undefined') {
		throw new TypeError('inputRange can not be undefined');
	}

	if (typeof outputRange === 'undefined') {
		throw new TypeError('outputRange can not be undefined');
	}

	if (inputRange.length !== outputRange.length) {
		throw new TypeError(
			'inputRange (' +
				inputRange.length +
				' values provided) and outputRange (' +
				outputRange.length +
				' values provided) must have the same length',
		);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Default the input: interpolateColors(input ?? 0, inputRange, outputRange).
  2. Trace where input becomes undefined and fix the upstream computation.
  3. Type the input source as number so the gap surfaces at compile time.

Example fix

// before
const color = interpolateColors(progress, [0, 1], ['red', 'green']); // progress undefined

// after
const color = interpolateColors(progress ?? 0, [0, 1], ['red', 'green']);
Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof input !== 'number' || Number.isNaN(input)) {
  throw new TypeError('interpolateColors: input must be a number');
}
interpolateColors(input, inputRange, outputRange);

Type guard

const isInterpInput = (v: unknown): v is number => typeof v === 'number' && !Number.isNaN(v);

Prevention

When it happens

Trigger: Calling interpolateColors(undefined, inputRange, outputRange) — usually because the input was computed from an optional value that was not provided.

Common situations: Frame or progress value sourced from optional input props or a hook that returned undefined; destructuring that silently yielded undefined.

Related errors

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