remotion-dev/remotion · error · TypeError

"${name}" must be an integer, but got ${JSON.stringify(value

Error message

"${name}" must be an integer, but got ${JSON.stringify(value)}

What it means

pixelDissolve() requires 'columns' and 'rows' to be integers (the grid divides the image into discrete cells). assertOptionalIntegerNumber throws a TypeError when either is supplied as a non-integer (fraction or non-number) before any GPU work runs.

Source

Thrown at packages/effects/src/pixel-dissolve.ts:93

	readonly seed: number;
	readonly feather: number;
};

const resolve = (params: PixelDissolveParams): PixelDissolveResolved => ({
	progress: params.progress ?? DEFAULT_PROGRESS,
	columns: params.columns ?? DEFAULT_COLUMNS,
	rows: params.rows ?? DEFAULT_ROWS,
	seed: params.seed ?? DEFAULT_SEED,
	feather: params.feather ?? DEFAULT_FEATHER,
});

const assertOptionalIntegerNumber = (value: unknown, name: string): void => {
	if (value === undefined) {
		return;
	}

	if (!Number.isInteger(value)) {
		throw new TypeError(
			`"${name}" must be an integer, but got ${JSON.stringify(value)}`,
		);
	}
};

const validatePixelDissolveParams = (params: PixelDissolveParams): void => {
	assertEffectParamsObject(params, 'Pixel Dissolve');
	assertOptionalFiniteNumber(params.progress, 'progress');
	assertOptionalFiniteNumber(params.columns, 'columns');
	assertOptionalFiniteNumber(params.rows, 'rows');
	assertOptionalFiniteNumber(params.seed, 'seed');
	assertOptionalFiniteNumber(params.feather, 'feather');
	assertOptionalIntegerNumber(params.columns, 'columns');
	assertOptionalIntegerNumber(params.rows, 'rows');

	const r = resolve(params);
	validateUnitInterval(r.progress, 'progress');
	validateUnitInterval(r.feather, 'feather');

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Round the value before passing: Math.round(x).
2. Keep columns/rows as whole numbers within the documented 1..400 range.
3. Coerce untyped inputs with Number() then check Number.isInteger yourself first.

Example fix

// before
pixelDissolve({ columns: animatedCols }) // animatedCols = 10.5

// after
pixelDissolve({ columns: Math.round(animatedCols) })

// Validate integer grid props before calling pixelDissolve().
function asInt(v: unknown, name: string): number | undefined {
  if (v === undefined) return undefined;
  const n = Number(v);
  if (!Number.isInteger(n)) throw new Error(`${name} must be an integer`);
  return n;
}
pixelDissolve({
  columns: asInt(raw.columns, 'columns'),
  rows: asInt(raw.rows, 'rows'),
});

const isOptionalInteger = (v: unknown): v is number =>
  v === undefined || (typeof v === 'number' && Number.isInteger(v));

When it happens

Trigger: Calling pixelDissolve({ columns: 10.5 }) or pixelDissolve({ rows: '8' }) or pixelDissolve({ columns: NaN }). Validation runs in validatePixelDissolveParams during effect setup.

Common situations: Animating columns/rows from a slider that yields fractions; passing stringified numbers from config/URL; computing grid counts from a ratio without rounding.

Related errors

• "${name}" must be an integer, but got ${JSON.stringify(value
• "columns" must be >= 1, but got ${JSON.stringify(r.columns)}
• "rows" must be >= 1, but got ${JSON.stringify(r.rows)}
• "${name}" must be an integer, but got ${JSON.stringify(value
• "${name}" must be greater than 0, but got ${JSON.stringify(v

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