{"record":{"id":"67f5e5b91003eda3","repo":"remotion-dev/remotion","slug":"cannot-interpolate-value-because-component-67f5e5","errorCode":null,"errorMessage":"Cannot interpolate \"${value}\" because \"${component}\" is not finite","messagePattern":"Cannot interpolate \"(.+?)\" because \"(.+?)\" is not finite","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":153,"sourceCode":"const parseStringInterpolationComponent = (\n\tcomponent: string,\n\tvalue: string,\n): {\n\tkind: StringInterpolationKind;\n\tvalue: number;\n\tunit: string | null;\n} => {\n\tconst match = cssNumberRegex.exec(component);\n\tif (match === null) {\n\t\tthrow new UnsupportedStringInterpolationValueError(\n\t\t\t`Cannot interpolate \"${value}\" because \"${component}\" is not a supported scale, translate, or rotate value`,\n\t\t);\n\t}\n\n\tconst unit = match[2] ?? null;\n\tconst numberValue = Number(match[1]);\n\tif (!Number.isFinite(numberValue)) {\n\t\tthrow new TypeError(\n\t\t\t`Cannot interpolate \"${value}\" because \"${component}\" is not finite`,\n\t\t);\n\t}\n\n\tif (unit === null) {\n\t\treturn {kind: 'scale', value: numberValue, unit: null};\n\t}\n\n\tif (angleUnits.has(unit)) {\n\t\treturn {kind: 'rotate', value: numberValue, unit};\n\t}\n\n\tif (lengthUnits.has(unit)) {\n\t\treturn {kind: 'translate', value: numberValue, unit};\n\t}\n\n\tthrow new TypeError(\n\t\t`Cannot interpolate \"${value}\" because \"${unit}\" is not a supported translate or rotate unit`,","sourceCodeStart":135,"sourceCodeEnd":171,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate.ts#L135-L171","documentation":"Thrown by interpolate's string parser when a component did parse as number-plus-unit but the numeric portion is not finite (NaN or Infinity). This points to an arithmetic or serialization bug producing a non-finite number embedded in the output string.","triggerScenarios":"Embedding the result of an unclamped/undefined math operation into a transform string, e.g. `translateX(${x/y}px)` where x/y is Infinity, or template-string interpolation of NaN.","commonSituations":"Building transform strings from frame math without clamping; division by zero or parsing failures feeding into the string.","solutions":["Clamp or guard the operand so it is always finite before interpolating it into the string.","Validate with Number.isFinite on each computed component.","Use interpolate()'s extrapolateLeft/Right='clamp' to keep the numeric source in range."],"exampleFix":"// before\nconst x = numerator / denom; // Infinity when denom === 0\ninterpolate(frame, [0, 100], [`translateX(${x}px)`, 'translateX(100px)']);\n\n// after\nconst x = Number.isFinite(numerator / denom) ? numerator / denom : 0;\ninterpolate(frame, [0, 100], [`translateX(${x}px)`, 'translateX(100px)']);","handlingStrategy":"validation","validationCode":"function buildTransform(n: number, unit: string): string {\n  const v = Number.isFinite(n) ? n : 0;\n  return `translateX(${v}${unit})`;\n}\ninterpolate(frame, [0, 100], [buildTransform(x, 'px'), 'translateX(100px)']);","typeGuard":"const isFiniteComponent = (n: number): boolean => Number.isFinite(n);","tryCatchPattern":null,"preventionTips":["Clamp computed numbers before interpolating them into transform strings.","Validate each component with Number.isFinite.","Use interpolate's extrapolate='clamp' to keep sources in range."],"tags":["interpolate","transform","css","math","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}