remotion-dev/remotion · error · Error

Could not serialize the passed input props to JSON

Error message

Could not serialize the passed input props to JSON: ${(err as Error).message}

What it means

Thrown by serializeJSONWithSpecialTypes when the input props contain a value that cannot be round-tripped through its custom JSON serializer (which handles Date, File, and Map/Set but rejects everything else it cannot stringify). The underlying error message is appended so the caller can see which value failed.

Solutions

Inspect the wrapped error message to identify the offending value, then remove or replace it.
Keep inputProps serializable: use plain objects, arrays, numbers, strings, booleans, null, plus Date/File/Map/Set which Remotion supports natively.
Strip functions/refs/class instances before serializing.
Break circular references or avoid passing them as input props.

Example fix

// before: input props include a function
const inputProps = {onClick: () => {}, title: 'Hi'};
serializeInputProps({props: inputProps, ...}); // throws

// after: pass only serializable data
const inputProps = {title: 'Hi'};

Defensive patterns

Strategy: validation

Validate before calling

function isSerializable(v: unknown): boolean {
  if (v === null || typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') return true;
  if (v instanceof Date || v instanceof File || v instanceof Map || v instanceof Set) return true;
  if (Array.isArray(v)) return v.every(isSerializable);
  if (typeof v === 'object') return Object.values(v as Record<string, unknown>).every(isSerializable);
  return false; // functions, symbols, class instances, circular
}
if (!isSerializable(inputProps)) {
  throw new Error('inputProps contains non-serializable values');
}

Try / catch

try {
  serializeInputProps({props: inputProps, ...});
} catch (err) {
  // err.message names the offending value — strip it from inputProps and retry,
  // or surface a clear validation error to the user.
  console.error('Input props serialization failed:', (err as Error).message);
  throw err;
}

Prevention

Keep inputProps to plain JSON plus Date/File/Map/Set.
Never put functions, refs, React elements, or DOM nodes in inputProps.
Validate with a custom isSerializable walker before passing props to the CLI or renderer.

When it happens

Trigger: Passing input props that include functions, circular references, symbols, class instances (other than the supported Date/File/Map/Set), or DOM nodes to serializeInputProps.

Common situations: Putting a React element, a ref, a callback, or a non-plain object into inputProps; serializing props for --props on the CLI that were built with class instances.

Related errors

AI-assisted analysis of remotion-dev/remotion@10db9de073 (2026-08-12). Data as JSON: /api/errors/9b71d839ca317898. Report an issue: GitHub.

Appendix: source

Thrown at packages/core/src/input-props-serialization.ts:66

				}

				if (
					typeof item === 'string' &&
					staticBase !== null &&
					staticBase !== '' &&
					item.startsWith(staticBase)
				) {
					customFileUsed = true;
					return `${FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
				}

				return value;
			},
			indent,
		);
		return {serializedString, customDateUsed, customFileUsed, mapUsed, setUsed};
	} catch (err) {
		throw new Error(
			'Could not serialize the passed input props to JSON: ' +
				(err as Error).message,
		);
	}
};

export const resolveFileTokenToUrl = (value: string) => {
	const encodedName = value.replace(FILE_TOKEN, '');
	let name = encodedName;
	try {
		name = encodedName.split('/').map(decodeURIComponent).join('/');
	} catch {
		// Keep the encoded name if it contains an invalid escape sequence.
	}

	const matchingStaticFile = window.remotion_staticFiles?.find(
		(file) => file.name === name,
	);

View on GitHub (pinned to 10db9de073)