remotion-dev/remotion · error · TypeError

"color" has been renamed to "dotColor"

Error message

"color" has been renamed to "dotColor"

What it means

Thrown by validateHalftoneParams() when the params object contains a 'color' key with a non-undefined value. The halftone effect renamed its 'color' parameter to 'dotColor' in an earlier change, and this guard exists to surface the rename with a clear message instead of silently ignoring the legacy prop. It runs after the enum checks and before dotColor-specific validation.

Source

Thrown at packages/effects/src/halftone.ts:188

	offsetY: p.offsetY ?? 0,
	sampling: p.sampling ?? 'bilinear',
	colorMode: p.colorMode ?? 'solid',
	dotColor: 'dotColor' in p ? (p.dotColor ?? 'red') : 'red',
	invert: p.invert ?? false,
});

const validateHalftoneParams = (params: HalftoneParams): void => {
	assertEffectParamsObject(params, 'Halftone');
	assertOptionalFiniteNumber(params.dotSize, 'dotSize');
	assertOptionalFiniteNumber(params.dotSpacing, 'dotSpacing');
	assertOptionalFiniteNumber(params.rotation, 'rotation');
	assertOptionalFiniteNumber(params.offsetX, 'offsetX');
	assertOptionalFiniteNumber(params.offsetY, 'offsetY');
	assertOptionalEnum(params.shape, 'shape', HALFTONE_SHAPES);
	assertOptionalEnum(params.sampling, 'sampling', HALFTONE_SAMPLING);
	assertOptionalEnum(params.colorMode, 'colorMode', HALFTONE_COLOR_MODES);
	if ('color' in params && params.color !== undefined) {
		throw new TypeError('"color" has been renamed to "dotColor"');
	}

	if (params.colorMode === 'source' && 'dotColor' in params) {
		throw new TypeError(
			'"dotColor" can only be set when "colorMode" is "solid"',
		);
	}

	assertOptionalColor(
		'dotColor' in params ? params.dotColor : undefined,
		'dotColor',
	);
	assertOptionalBoolean(params.invert, 'invert');

	if (params.dotSize !== undefined && params.dotSize < 1) {
		throw new TypeError(
			`"dotSize" must be >= 1, but got ${JSON.stringify(params.dotSize)}`,
		);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Rename the 'color' prop to 'dotColor' at every call site.
  2. Search the codebase for halftone calls and confirm none pass color.
  3. Bump any internal wrapper components that forward color to halftone.

Example fix

// before
halftone({ color: 'red', shape: 'circle' })

// after
halftone({ dotColor: 'red', shape: 'circle' })
Defensive patterns

Strategy: validation

Validate before calling

// Reject the legacy prop before passing params to halftone().
function migrateHalftoneParams<T extends Record<string, unknown>>(p: T): T {
  if ('color' in p && (p as Record<string, unknown>).color !== undefined) {
    throw new Error('halftone "color" was renamed to "dotColor" — please update your call site.');
  }
  return p;
}

Type guard

function hasLegacyColorProp(p: unknown): p is { color: unknown } {
  return typeof p === 'object' && p !== null && 'color' in p && (p as { color: unknown }).color !== undefined;
}

Prevention

When it happens

Trigger: Calling halftone({ color: 'red' }) or halftone({ color: '#fff', shape: 'square' }) — i.e. using the old parameter name from pre-rename example code or an outdated dependency.

Common situations: Upgrading @remotion/effects to a version that contains the rename, while application code still passes color; copy-pasted code from old blog posts or docs; a shared component library that has not been updated.

Related errors


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