{"record":{"id":"4b80c148a884d68e","repo":"remotion-dev/remotion","slug":"width-and-height-must-either-both-be-numbers-or-bo","errorCode":null,"errorMessage":"width and height must either both be numbers or both be null","messagePattern":"width and height must either both be numbers or both be null","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/studio/src/components/composition-drag-data.ts","lineNumber":185,"sourceCode":"\t\ttype: 'composition',\n\t\twidth,\n\t\theight,\n\t\tdurationInFrames,\n\t\tmimeType,\n\t};\n};\n\nexport const makeCompositionDragData = ({\n\tcompositionFile,\n\tcompositionId,\n\twidth,\n\theight,\n\tdurationInFrames,\n}: MakeCompositionDragDataInput): SerializedCompositionDragData & {\n\treadonly data: CompositionDragData;\n} => {\n\tif ((width === null) !== (height === null)) {\n\t\tthrow new TypeError(\n\t\t\t'width and height must either both be numbers or both be null',\n\t\t);\n\t}\n\n\tif (\n\t\twidth !== null &&\n\t\t(!Number.isFinite(width) || width <= 0 || width > MAX_DIMENSION)\n\t) {\n\t\tthrow new TypeError(\n\t\t\t`width and height must be numbers between 0 and ${MAX_DIMENSION}`,\n\t\t);\n\t}\n\n\tif (\n\t\theight !== null &&\n\t\t(!Number.isFinite(height) || height <= 0 || height > MAX_DIMENSION)\n\t) {\n\t\tthrow new TypeError(","sourceCodeStart":167,"sourceCodeEnd":203,"githubUrl":"https://github.com/remotion-dev/remotion/blob/a6a7485a9aeb04219510fbe4874f8941486424df/packages/studio/src/components/composition-drag-data.ts#L167-L203","documentation":"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.","triggerScenarios":"Calling makeCompositionDragData({..., width: 1920, height: null}) or {width: null, height: 1080} — exactly one of width/height is null while the other is a number.","commonSituations":"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.","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"],"exampleFix":"// before\nmakeCompositionDragData({compositionId, compositionFile, width: comp.width ?? null, height: comp.height})\n// after\nconst width = Number.isFinite(comp.width) ? comp.width : null;\nconst height = Number.isFinite(comp.height) ? comp.height : null;\nconst pair = width !== null && height !== null ? {width, height} : {width: null, height: null};\nmakeCompositionDragData({compositionId, compositionFile, ...pair})","handlingStrategy":"validation","validationCode":"const width = Number.isFinite(comp.width) ? comp.width : null;\nconst height = Number.isFinite(comp.height) ? comp.height : null;\nif ((width === null) !== (height === null)) {\n  throw new TypeError('width/height must both be set or both null');\n}","typeGuard":"const isDimensionPair = (w: number | null, h: number | null): boolean =>\n  (w === null) === (h === null);","tryCatchPattern":"try {\n  return makeCompositionDragData({...});\n} catch (err) {\n  if (err instanceof TypeError) {\n    return makeCompositionDragData({..., width: null, height: null});\n  }\n  throw err;\n}","preventionTips":["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"],"tags":["validation","typescript","drag-and-drop","studio"],"backgroundTag":"schema-validation-failed","analyzedSha":"a6a7485a9aeb04219510fbe4874f8941486424df","analyzedAt":"2026-09-02T16:25:19.997Z","contentChangedAt":"2026-09-02T16:25:19.997Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}