remotion-dev/remotion · error · Error

outputRange can not be undefined

Error message

outputRange can not be undefined

What it means

Thrown at the top of interpolateStyles when the outputStylesRange argument is undefined. Note the message says 'outputRange' (legacy naming) although the parameter is named outputStylesRange. The guard catches calls that omit the third argument or pass an optional styles array.

Source

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

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

	assertValidInterpolatePosterizeOption(options?.posterize);
	const posterizedInput =
		options?.posterize === undefined

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Pass a valid styles array of length >= 2 matching inputRange.
  2. Default to a styles constant: interpolateStyles(frame, range, maybeStyles ?? DEFAULT_STYLES).
  3. Type the variable as Style[] so the compiler flags undefined at the call site.

Example fix

// before
interpolateStyles(frame, [0, 30], maybeStyles);

// after
const DEFAULT_STYLES = [{opacity: 1}, {opacity: 0}];
interpolateStyles(frame, [0, 30], maybeStyles ?? DEFAULT_STYLES);
Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

import type {CSSProperties} from 'react';
const isStyleArray = (v: unknown): v is CSSProperties[] =>
  Array.isArray(v) && v.every((s) => s !== null && typeof s === 'object');

Prevention

When it happens

Trigger: Calling interpolateStyles(frame, range, undefined); omitting the third argument; passing a styles array from config that was not loaded.

Common situations: Optional config that may be undefined; a delayed data load; refactoring that dropped the third argument.

Related errors

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