{"record":{"id":"a6c63ed048f76dd5","repo":"remotion-dev/remotion","slug":"outputstyles-must-contain-only-objects","errorCode":null,"errorMessage":"outputStyles must contain only objects","messagePattern":"outputStyles must contain only objects","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx","lineNumber":266,"sourceCode":"\n\t\tif (index > 0 && !(arr[index] > arr[index - 1])) {\n\t\t\tthrow new Error(\n\t\t\t\t`inputRange must be strictly monotonically non-decreasing but got [${arr.join(\n\t\t\t\t\t',',\n\t\t\t\t)}]`,\n\t\t\t);\n\t\t}\n\t}\n}\n\nfunction checkStylesRange(arr: readonly Style[]) {\n\tif (arr.length < 2) {\n\t\tthrow new Error('outputStyles must have at least 2 elements');\n\t}\n\n\tfor (const index in arr) {\n\t\tif (typeof arr[index] !== 'object') {\n\t\t\tthrow new Error('outputStyles must contain only objects');\n\t\t}\n\t}\n}\n\n/*\n * @description A function that interpolates between two styles based on an input range.\n * @see [Documentation](https://remotion.dev/docs/animation-utils/interpolate-styles)\n */\nexport const interpolateStyles = (\n\tinput: number,\n\tinputRange: number[],\n\toutputStylesRange: Style[],\n\toptions?: InterpolateOptions,\n) => {\n\tif (typeof input === 'undefined') {\n\t\tthrow new Error('input can not be undefined');\n\t}\n","sourceCodeStart":248,"sourceCodeEnd":284,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx#L248-L284","documentation":"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.","triggerScenarios":"Passing [null, {opacity: 1}], [{opacity: 1}, 'none'], or mixing arrays/strings/numbers into the styles list.","commonSituations":"Sparse arrays with holes; JSON containing nulls; conditional style objects that returned undefined and got coerced; merging style arrays from different sources.","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."],"exampleFix":"// before\ninterpolateStyles(frame, [0, 30], [null, {opacity: 0}]);\n\n// after\ninterpolateStyles(frame, [0, 30], [{opacity: 1}, {opacity: 0}]);","handlingStrategy":"validation","validationCode":"// Note: typeof null === 'object', so explicitly exclude null.\nif (!outputStylesRange.every((s) => s !== null && typeof s === 'object')) {\n  throw new Error('outputStyles must contain only non-null objects');\n}","typeGuard":"import type {CSSProperties} from 'react';\nconst isStyleObject = (v: unknown): v is CSSProperties =>\n  v !== null && typeof v === 'object' && !Array.isArray(v);","tryCatchPattern":null,"preventionTips":["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."],"tags":["interpolate-styles","output-styles","validation","typescript"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}