{"record":{"id":"c0dd1e6940d977e2","repo":"remotion-dev/remotion","slug":"string-outputrange-values-must-contain-1-to-3-comp","errorCode":null,"errorMessage":"String outputRange values must contain 1 to 3 components, but got \"${output}\"","messagePattern":"String outputRange values must contain 1 to 3 components, but got \"(.+?)\"","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":472,"sourceCode":"\t\t}\n\n\t\treturn parseTransformOriginValue(output, transformOriginParts);\n\t}\n\n\tconst axisRotation = parseAxisRotationValue(output);\n\tif (axisRotation !== null) {\n\t\tif (outputType !== undefined && outputType !== 'rotate') {\n\t\t\tthrow new TypeError(\n\t\t\t\t`Cannot interpolate \"${output}\" as ${outputType} because it is a rotate value`,\n\t\t\t);\n\t\t}\n\n\t\treturn axisRotation;\n\t}\n\n\tconst parts = output.trim().split(/\\s+/);\n\tif (parts.length < 1 || parts.length > 3 || parts[0] === '') {\n\t\tthrow new TypeError(\n\t\t\t`String outputRange values must contain 1 to 3 components, but got \"${output}\"`,\n\t\t);\n\t}\n\n\tif (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {\n\t\tif (outputType !== undefined) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`Cannot interpolate \"${output}\" as ${outputType} because it is a transform-origin value`,\n\t\t\t);\n\t\t}\n\n\t\treturn parseTransformOriginValue(output, parts);\n\t}\n\n\tconst parsed = parts.map((part) =>\n\t\tparseStringInterpolationComponent(part, output),\n\t);\n\tconst [{kind}] = parsed;","sourceCodeStart":454,"sourceCodeEnd":490,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/core/src/interpolate.ts#L454-L490","documentation":"Thrown by parseStringInterpolationValue when a string outputRange value, after axis-rotation parsing fails, splits into fewer than 1 or more than 3 whitespace-separated components (or is empty). Remotion's scale/translate/rotate shorthand accepts 1, 2, or 3 components only; a 4-component non-axis-rotation string is not a valid shorthand.","triggerScenarios":"An outputRange string like \"1px 2px 3px 4px\" (4 components), \"   \" (only whitespace, splits to ['']), or \"\" (empty). Four-component values are reserved for the axis-rotation form \"x y z angle\" which is handled earlier by parseAxisRotationValue.","commonSituations":"Trying to interpolate a full transform() function string; pasting CSS shorthand that uses 4 sides (margins/padding) into a translate slot; trailing whitespace producing an empty first component.","solutions":["Reduce to 1-3 numeric components: \"1px 2px 3px\" instead of \"1px 2px 3px 4px\".","For a 4-component axis rotation use the recognized form \"x y z angleDeg\", e.g. \"1 0 0 45deg\".","Trim() and validate the string before passing it."],"exampleFix":"// before\ninterpolate(t, [0, 1], [\"0px 0px 0px 0px\", \"10px 20px 30px 40px\"]);\n// after\ninterpolate(t, [0, 1], [\"0px 0px 0px\", \"10px 20px 30px\"]);","handlingStrategy":"validation","validationCode":"function isValidComponentCount(value: string): boolean {\n  const parts = value.trim().split(/\\s+/);\n  return parts.length >= 1 && parts.length <= 3 && parts[0] !== '';\n}\n\nconst bad = outputRange.filter((o) => typeof o === 'string' && !isValidComponentCount(o));\nif (bad.length) throw new Error(`Invalid component count: ${bad.join(', ')}`);","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Limit string outputs to 1-3 whitespace-separated components.","Use the 4-component axis-rotation form \"x y z angle\" only when you mean a 3D rotation.","Trim strings before validation."],"tags":["interpolate","string-interpolation","argument-shape","validation"],"backgroundTag":null,"analyzedSha":"46a3a6bf13ca367376ff18bbb06dae2e87e0d068","analyzedAt":"2026-08-12T17:18:50.444Z","contentChangedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}