remotion-dev/remotion · error · TypeError

width and height must either both be numbers or both be null

Error message

width and height must either both be numbers or both be null

What it means

makeCompositionDragData serializes a Studio composition into drag-and-drop MIME data. It enforces that the optional width/height pair is consistent: either both are provided as numbers or both are null. Passing exactly one of them (the other null) throws this TypeError, because a composition's dimensions can only be encoded as a pair in the drag payload.

Source

Thrown at packages/studio/src/components/composition-drag-data.ts:185

		type: 'composition',
		width,
		height,
		durationInFrames,
		mimeType,
	};
};

export const makeCompositionDragData = ({
	compositionFile,
	compositionId,
	width,
	height,
	durationInFrames,
}: MakeCompositionDragDataInput): SerializedCompositionDragData & {
	readonly data: CompositionDragData;
} => {
	if ((width === null) !== (height === null)) {
		throw new TypeError(
			'width and height must either both be numbers or both be null',
		);
	}

	if (
		width !== null &&
		(!Number.isFinite(width) || width <= 0 || width > MAX_DIMENSION)
	) {
		throw new TypeError(
			`width and height must be numbers between 0 and ${MAX_DIMENSION}`,
		);
	}

	if (
		height !== null &&
		(!Number.isFinite(height) || height <= 0 || height > MAX_DIMENSION)
	) {
		throw new TypeError(

View on GitHub (pinned to a6a7485a9a)

Solutions

Pass both width and height from the composition, or both as null: width: comp.width ?? null, height: comp.height ?? null
Normalize the pair before calling: if either dimension is not a finite number, set both to null
Check the caller for a bug where width and height are sourced from different fields
If dimensions are genuinely unknown, pass null for both so the drag data encodes no size

Example fix

// before
makeCompositionDragData({compositionId, compositionFile, width: comp.width ?? null, height: comp.height})
// after
const width = Number.isFinite(comp.width) ? comp.width : null;
const height = Number.isFinite(comp.height) ? comp.height : null;
const pair = width !== null && height !== null ? {width, height} : {width: null, height: null};
makeCompositionDragData({compositionId, compositionFile, ...pair})

Defensive patterns

Strategy: validation

Validate before calling

const width = Number.isFinite(comp.width) ? comp.width : null;
const height = Number.isFinite(comp.height) ? comp.height : null;
if ((width === null) !== (height === null)) {
  throw new TypeError('width/height must both be set or both null');
}

Type guard

const isDimensionPair = (w: number | null, h: number | null): boolean =>
  (w === null) === (h === null);

Try / catch

try {
  return makeCompositionDragData({...});
} catch (err) {
  if (err instanceof TypeError) {
    return makeCompositionDragData({..., width: null, height: null});
  }
  throw err;
}

Prevention

Always derive width/height together from the same source object
Default both to null when either is missing: comp.width && comp.height ? {width: comp.width, height: comp.height} : {width: null, height: null}
Validate the pair before constructing drag data
Never source width and height from different fields

When it happens

Trigger: Calling makeCompositionDragData({..., width: 1920, height: null}) or {width: null, height: 1080} — exactly one of width/height is null while the other is a number.

Common situations: Reading dimensions from a composition object where one was undefined and defaulted to null independently; destructuring errors; compositions with unresolved/missing metadata where only one dimension was known.

Understand the failure class

Background: Schema validation failed / invalid input schema: payload rejected because its shape doesn't match the expected schema — this error's family across 28 libraries.

Related errors

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