remotion-dev/remotion · error · TypeError

outputRange can not be undefined

Error message

outputRange can not be undefined

What it means

Thrown by interpolateColors when the `outputRange` argument is undefined. Like inputRange, the output color range is required to perform the mapping.

Source

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

 * @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));

	return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pass an explicit outputRange of color strings, e.g. ['#000', '#fff'].
2. Default it where optional: outputRange ?? ['red', 'green'].
3. Annotate the source type so the omission surfaces at compile time.

Example fix

// before
interpolateColors(frame, [0, 100], colors); // colors undefined

// after
interpolateColors(frame, [0, 100], colors ?? ['#ff0000', '#00ff00']);

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

const isStringArray = (v: unknown): v is readonly string[] => Array.isArray(v) && v.every((s) => typeof s === 'string');

When it happens

Trigger: Calling interpolateColors(input, inputRange, undefined) — usually because outputRange came from a missing field or an empty map/filter that returned undefined.

Common situations: Dynamic color arrays sourced from config or props that may be absent; copy-paste omitting the third argument.

Related errors

• input can not be undefined
• inputRange can not be undefined
• invalid color string ${color} provided
• inputRange (${inputRange.length} values provided) and output
• input can not be undefined

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