{"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":443,"sourceCode":"\t\t}\n\n\t\treturn {\n\t\t\tkind: 'scale',\n\t\t\tvalues: [output, output, 1, 0],\n\t\t\tunits: [null, null, null, null],\n\t\t\tdimensions: 1,\n\t\t\taxisRotation: false,\n\t\t};\n\t}\n\n\tconst axisRotation = parseAxisRotationValue(output);\n\tif (axisRotation !== null) {\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\treturn parseTransformOriginValue(output, parts);\n\t}\n\n\tconst parsed = parts.map((part) =>\n\t\tparseStringInterpolationComponent(part, output),\n\t);\n\tconst [{kind}] = parsed;\n\tfor (const part of parsed) {\n\t\tif (part.kind !== kind) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`Cannot interpolate \"${output}\" because it mixes ${kind} and ${part.kind} values`,\n\t\t\t);\n\t\t}","sourceCodeStart":425,"sourceCodeEnd":461,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate.ts#L425-L461","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":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}