remotion-dev/remotion · error · Error

inputRange can not be undefined

Error message

inputRange can not be undefined

What it means

Thrown at the top of interpolateStyles when the inputRange argument is undefined. Same runtime-guard pattern as the input check; it catches calls that omit the range or pass an optional array that was never loaded.

Source

Thrown at packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx:286

	}
}

/*
 * @description A function that interpolates between two styles based on an input range.
 * @see [Documentation](https://remotion.dev/docs/animation-utils/interpolate-styles)
 */
export const interpolateStyles = (
	input: number,
	inputRange: number[],
	outputStylesRange: Style[],
	options?: InterpolateOptions,
) => {
	if (typeof input === 'undefined') {
		throw new Error('input can not be undefined');
	}

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

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

	if (inputRange.length !== outputStylesRange.length) {
		throw new Error(
			'inputRange (' +
				inputRange.length +
				') and outputStylesRange (' +
				outputStylesRange.length +
				') must have the same length',
		);
	}

	checkInputRange(inputRange);
	checkStylesRange(outputStylesRange);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Default to a valid range array: interpolateStyles(frame, maybeRange ?? [0, 30], styles).
2. Validate config presence before calling (e.g. guard with if (!range) return fallbackStyle).
3. Type the variable as number[] so the compiler flags undefined at the call site.

Example fix

// before
interpolateStyles(frame, maybeRange, [{opacity: 1}, {opacity: 0}]);

// after
interpolateStyles(frame, maybeRange ?? [0, 30], [{opacity: 1}, {opacity: 0}]);

if (!Array.isArray(inputRange)) {
  throw new Error('inputRange must be provided');
}

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

When it happens

Trigger: Calling interpolateStyles(frame, undefined, styles); passing a range from config that was not yet loaded.

Common situations: Optional config that may be undefined; a delayed data load where interpolateStyles runs before the range is available.

Related errors

• inputRange must have at least 2 elements
• inputRange must contain only numbers
• inputRange must contain only finite numbers, but got [${arr.
• inputRange must be strictly monotonically non-decreasing but
• input can not be undefined

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