What causes "outputStyles must contain only objects" in remotion-dev/remotion?

Filter the array so every element is a non-null object: styles.filter((s) => s && typeof s === 'object').

remotion-dev/remotion · error · Error

outputStyles must contain only objects

Error message

outputStyles must contain only objects

What it means

Thrown by checkStylesRange when any element of outputStylesRange is not of type 'object'. Each element must be a style object (React.CSSProperties). Note: because typeof null === 'object' in JavaScript, null elements slip past this check and will fail later during property interpolation.

Source

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

		if (index > 0 && !(arr[index] > arr[index - 1])) {
			throw new Error(
				`inputRange must be strictly monotonically non-decreasing but got [${arr.join(
					',',
				)}]`,
			);
		}
	}
}

function checkStylesRange(arr: readonly Style[]) {
	if (arr.length < 2) {
		throw new Error('outputStyles must have at least 2 elements');
	}

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Filter the array so every element is a non-null object: styles.filter((s) => s && typeof s === 'object').
Replace null/undefined entries with a valid style object (e.g. {} or an identity style).
Build the styles array from a single typed source so no stray non-objects enter.

Example fix

// before
interpolateStyles(frame, [0, 30], [null, {opacity: 0}]);

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

Defensive patterns

Strategy: validation

Validate before calling

// Note: typeof null === 'object', so explicitly exclude null.
if (!outputStylesRange.every((s) => s !== null && typeof s === 'object')) {
  throw new Error('outputStyles must contain only non-null objects');
}

Type guard

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

Prevention

Filter out null/undefined entries: styles.filter((s) => s != null && typeof s === 'object').
Type the array as CSSProperties[] so non-objects fail to compile.
Remember typeof null === 'object' — explicitly guard against null.

When it happens

Trigger: Passing [null, {opacity: 1}], [{opacity: 1}, 'none'], or mixing arrays/strings/numbers into the styles list.

Common situations: Sparse arrays with holes; JSON containing nulls; conditional style objects that returned undefined and got coerced; merging style arrays from different sources.

Related errors

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