remotion-dev/remotion · error · TypeError

inputRange can not be undefined

Error message

inputRange can not be undefined

What it means

Thrown by interpolateColors when the `inputRange` argument is undefined. The function needs an explicit input range to map from; omitting it is always a caller bug.

Source

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

	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',
		);
	}

	const processedOutputRange = outputRange.map((c) => processColor(c));

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Pass an explicit inputRange array, e.g. [0, durationInFrames - 1].
  2. Default it where it may be optional: inputRange ?? [0, 1].
  3. Add a TypeScript type annotation so the missing argument is caught at compile time.

Example fix

// before
interpolateColors(frame, range, colors); // range undefined

// after
interpolateColors(frame, range ?? [0, 100], colors);
Defensive patterns

Strategy: type-guard

Validate before calling

if (!Array.isArray(inputRange) || inputRange.length === 0) {
  throw new TypeError('interpolateColors: inputRange must be a non-empty number[]');
}
interpolateColors(input, inputRange, outputRange);

Type guard

const isNumberArray = (v: unknown): v is readonly number[] => Array.isArray(v) && v.every((n) => typeof n === 'number');

Prevention

When it happens

Trigger: Calling interpolateColors(input, undefined, outputRange), typically because inputRange was destructured from a missing field or built by a helper that returned undefined.

Common situations: Building the range dynamically (e.g. from a config that may be absent); copy-paste that left the second argument out.

Related errors


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