remotion-dev/remotion · error · TypeError

String outputRange values must contain 1 to 3 components, bu

Error message

String outputRange values must contain 1 to 3 components, but got "${output}"

What it means

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.

Source

Thrown at packages/core/src/interpolate.ts:443

		}

		return {
			kind: 'scale',
			values: [output, output, 1, 0],
			units: [null, null, null, null],
			dimensions: 1,
			axisRotation: false,
		};
	}

	const axisRotation = parseAxisRotationValue(output);
	if (axisRotation !== null) {
		return axisRotation;
	}

	const parts = output.trim().split(/\s+/);
	if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
		throw new TypeError(
			`String outputRange values must contain 1 to 3 components, but got "${output}"`,
		);
	}

	if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
		return parseTransformOriginValue(output, parts);
	}

	const parsed = parts.map((part) =>
		parseStringInterpolationComponent(part, output),
	);
	const [{kind}] = parsed;
	for (const part of parsed) {
		if (part.kind !== kind) {
			throw new TypeError(
				`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`,
			);
		}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce to 1-3 numeric components: "1px 2px 3px" instead of "1px 2px 3px 4px".
2. For a 4-component axis rotation use the recognized form "x y z angleDeg", e.g. "1 0 0 45deg".
3. Trim() and validate the string before passing it.

Example fix

// before
interpolate(t, [0, 1], ["0px 0px 0px 0px", "10px 20px 30px 40px"]);
// after
interpolate(t, [0, 1], ["0px 0px 0px", "10px 20px 30px"]);

function isValidComponentCount(value: string): boolean {
  const parts = value.trim().split(/\s+/);
  return parts.length >= 1 && parts.length <= 3 && parts[0] !== '';
}

const bad = outputRange.filter((o) => typeof o === 'string' && !isValidComponentCount(o));
if (bad.length) throw new Error(`Invalid component count: ${bad.join(', ')}`);

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Cannot interpolate "${value}" because "${component}" is not
• outputRange must contain only finite numbers, but got [${out
• Cannot interpolate "${output}" because it mixes ${kind} and
• Cannot interpolate ${kind} values with ${parsed.kind} values
• Cannot interpolate ${kind} values with different units on ax

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/c0dd1e6940d977e2. Report an issue: GitHub.