remotion-dev/remotion · error · TypeError

Effect config must contain only finite JSON values

Error message

Effect config must contain only finite JSON values

What it means

makeEffectDragData builds the drag payload for an effect and validates that the effect's config is a plain record containing only finite, JSON-safe values using the effectConfigSchema (z.record of z.json from zod/mini). Values like NaN, Infinity, undefined, functions, or class instances are not finite JSON and would break serialization for drag-and-drop, so a TypeError is thrown.

Source

Thrown at packages/studio-protocol/src/effect-drag-data.ts:40

	};
};

const effectConfigSchema = z.record(z.string(), z.json());
const effectDragDataSchema = z.object({
	type: z.literal('remotion-effect'),
	version: z.literal(1),
	effect: z.object({
		name: z.string(),
		importPath: z.string(),
		config: effectConfigSchema,
	}),
});

export const makeEffectDragData = (
	effect: EffectDragData['effect'],
): EffectDragData => {
	if (!z.safeParse(effectConfigSchema, effect.config).success) {
		throw new TypeError('Effect config must contain only finite JSON values');
	}

	return {
		type: 'remotion-effect',
		version: 1,
		effect,
	};
};

export const parseEffectDragData = (value: string): EffectDragData | null => {
	try {
		const parsed = z.safeParse(effectDragDataSchema, JSON.parse(value));
		if (!parsed.success) {
			return null;
		}

		return makeEffectDragData({
			name: parsed.data.effect.name,

View on GitHub (pinned to a6a7485a9a)

Solutions

1. Sanitize the config before calling: replace NaN/Infinity with null or a finite sentinel and strip undefined/non-plain values
2. Validate the config against the JSON schema yourself and surface a friendly message
3. Clone the config through JSON.parse(JSON.stringify(...)) with a reviver that removes invalid values

Example fix

// before
makeEffectDragData({name: 'Blur', importPath: 'x', config: {amount: NaN}});
// after
makeEffectDragData({name: 'Blur', importPath: 'x', config: {amount: Number.isFinite(amount) ? amount : 0}});

import * as z from 'zod/mini';
const cfg = z.safeParse(effectConfigSchema, effect.config);
if (!cfg.success) throw new Error('Effect config has non-JSON values: ' + JSON.stringify(cfg.error.issues));

const isFiniteJson = (v: unknown): boolean =>
  v === null || typeof v === 'string' || typeof v === 'boolean' ||
  (typeof v === 'number' && Number.isFinite(v)) ||
  (Array.isArray(v) && v.every(isFiniteJson)) ||
  (typeof v === 'object' && v !== null && Object.values(v).every(isFiniteJson));

try {
  const data = makeEffectDragData(effect);
} catch (e) {
  if (e instanceof TypeError && String(e).includes('finite JSON values')) {
    effect.config = sanitizeConfig(effect.config); // replace NaN/Infinity, strip undefined
  } else throw e;
}

When it happens

Trigger: Calling makeEffectDragData with an effect whose config contains non-JSON-safe values: NaN or Infinity numbers, undefined values, functions, Symbols, or non-plain objects.

Common situations: Effect props computed from division by zero or Math operations producing NaN/Infinity; passing live React state objects with functions; effect configs built from parsed data that kept undefined entries.

Related errors

• Could not serialize the passed input props to JSON: ${(err a
• Emoji ${emoji} not found. Available emojis: ${emojis.map((e)
• The start and end values must be of the same type. Start val
• Non-animatable values cannot be interpolated. Start value: $
• The units of the start and end values must match. Start valu

AI-assisted analysis of remotion-dev/remotion@a6a7485a9a (2026-09-02). Data as JSON: /api/errors/e86cd1641fb6d097. Report an issue: GitHub.