remotion-dev/remotion · error · Error

input can not be undefined

Error message

input can not be undefined

What it means

Thrown at the top of interpolateStyles when the `input` argument is undefined. Although the TypeScript signature requires a number, this runtime guard catches callers that bypass types or pass an optional value that was never set.

Source

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

	for (const index in arr) {
		if (typeof arr[index] !== 'object') {
			throw new Error('outputStyles must contain only objects');
		}
	}
}

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Default the input to a finite number: interpolateStyles(input ?? 0, range, styles).
2. Validate the source of the frame value before calling (e.g. assert input != null).
3. Type the variable as number (not number | undefined) so the compiler flags the call site.

Example fix

// before
interpolateStyles(maybeFrame, [0, 30], [{opacity: 1}, {opacity: 0}]);

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

if (typeof input === 'undefined') {
  input = 0; // or throw upstream
}

const isDefinedNumber = (v: unknown): v is number => typeof v === 'number';

When it happens

Trigger: Calling interpolateStyles(undefined, range, styles); passing an optional frame variable from props/state that was never assigned.

Common situations: Using a value from props or state that may be undefined; a destructuring misconfiguration; calling before a frame value is initialized.

Related errors

• inputRange can not be undefined
• outputRange can not be undefined
• The start and end values must be of the same type. Start val
• Non-animatable values cannot be interpolated. Start value: $
• The units of the start and end values must match. Start valu

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