remotion-dev/remotion · error · TypeError

String outputRange values must contain 1 to 3 components…

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.

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 values with different units on axis : and
• Cannot interpolate values with values
• Cannot interpolate " " because it mixes and values
• Cannot interpolate " " because " " is not a supported…
• outputRange must contain only finite numbers, but got

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

Appendix: source

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

		}

		return parseTransformOriginValue(output, transformOriginParts);
	}

	const axisRotation = parseAxisRotationValue(output);
	if (axisRotation !== null) {
		if (outputType !== undefined && outputType !== 'rotate') {
			throw new TypeError(
				`Cannot interpolate "${output}" as ${outputType} because it is a rotate value`,
			);
		}

		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()))) {
		if (outputType !== undefined) {
			throw new TypeError(
				`Cannot interpolate "${output}" as ${outputType} because it is a transform-origin value`,
			);
		}

		return parseTransformOriginValue(output, parts);
	}

	const parsed = parts.map((part) =>
		parseStringInterpolationComponent(part, output),
	);
	const [{kind}] = parsed;

View on GitHub (pinned to 46a3a6bf13)