{"record":{"id":"a6aa41c8bbfd51cd","repo":"remotion-dev/remotion","slug":"outputrange-can-not-be-undefined","errorCode":null,"errorMessage":"outputRange can not be undefined","messagePattern":"outputRange can not be undefined","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx","lineNumber":290,"sourceCode":" * @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\n\tif (typeof inputRange === 'undefined') {\n\t\tthrow new Error('inputRange can not be undefined');\n\t}\n\n\tif (typeof outputStylesRange === 'undefined') {\n\t\tthrow new Error('outputRange can not be undefined');\n\t}\n\n\tif (inputRange.length !== outputStylesRange.length) {\n\t\tthrow new Error(\n\t\t\t'inputRange (' +\n\t\t\t\tinputRange.length +\n\t\t\t\t') and outputStylesRange (' +\n\t\t\t\toutputStylesRange.length +\n\t\t\t\t') must have the same length',\n\t\t);\n\t}\n\n\tcheckInputRange(inputRange);\n\tcheckStylesRange(outputStylesRange);\n\n\tassertValidInterpolatePosterizeOption(options?.posterize);\n\tconst posterizedInput =\n\t\toptions?.posterize === undefined","sourceCodeStart":272,"sourceCodeEnd":308,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx#L272-L308","documentation":"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.","triggerScenarios":"Calling interpolateStyles(frame, range, undefined); omitting the third argument; passing a styles array from config that was not loaded.","commonSituations":"Optional config that may be undefined; a delayed data load; refactoring that dropped the third argument.","solutions":["Pass a valid styles array of length >= 2 matching inputRange.","Default to a styles constant: interpolateStyles(frame, range, maybeStyles ?? DEFAULT_STYLES).","Type the variable as Style[] so the compiler flags undefined at the call site."],"exampleFix":"// before\ninterpolateStyles(frame, [0, 30], maybeStyles);\n\n// after\nconst DEFAULT_STYLES = [{opacity: 1}, {opacity: 0}];\ninterpolateStyles(frame, [0, 30], maybeStyles ?? DEFAULT_STYLES);","handlingStrategy":"validation","validationCode":"if (!Array.isArray(outputStylesRange)) {\n  throw new Error('outputStylesRange must be provided');\n}","typeGuard":"import type {CSSProperties} from 'react';\nconst isStyleArray = (v: unknown): v is CSSProperties[] =>\n  Array.isArray(v) && v.every((s) => s !== null && typeof s === 'object');","tryCatchPattern":null,"preventionTips":["Type outputStylesRange as CSSProperties[] so the compiler rejects undefined.","Default optional styles with ?? DEFAULT_STYLES.","Note the message says 'outputRange' but the parameter is outputStylesRange."],"tags":["interpolate-styles","output-styles","validation","undefined"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}