remotion-dev/remotion · error · Error

inputRange (${inputRange.length}) and outputStylesRange (${o

Error message

inputRange (${inputRange.length}) and outputStylesRange (${outputStylesRange.length}) must have the same length

What it means

Thrown by interpolateStyles when inputRange and outputStylesRange have different lengths. Each input frame value must map to exactly one output style, so the two arrays must be the same length; a mismatch means a keyframe is missing its style or vice versa.

Source

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

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

	assertValidInterpolatePosterizeOption(options?.posterize);
	const posterizedInput =
		options?.posterize === undefined
			? input
			: Math.floor(input / options.posterize) * options.posterize;

	let startIndex = inputRange.findIndex((step) => posterizedInput < step) - 1;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Assert inputRange.length === outputStylesRange.length before calling interpolateStyles.
2. Build both arrays from a single keyframe-definition source so they cannot diverge.
3. Add a unit test that checks length equality for your keyframe data.

Example fix

// before
interpolateStyles(frame, [0, 10, 30], [{opacity: 1}, {opacity: 0}]);  // 3 vs 2

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

if (inputRange.length !== outputStylesRange.length) {
  throw new Error(
    `Length mismatch: inputRange=${inputRange.length}, styles=${outputStylesRange.length}`,
  );
}

When it happens

Trigger: Passing 3 input values but only 2 styles, or 2 input values with 3 styles; dynamically building one array from different data than the other.

Common situations: Editing keyframes and forgetting to update both arrays; generating ranges and styles from separate loops that diverge; appending a keyframe to one array only.

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
• outputStyles must have at least 2 elements

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