{"record":{"id":"6e5facadec6dcae4","repo":"remotion-dev/remotion","slug":"the-durationinframes-prop-component-must-be-a","errorCode":null,"errorMessage":"The \"durationInFrames\" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}","messagePattern":"The \"durationInFrames\" prop (.+?) must be a number, but you passed a value of type (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/validation/validate-duration-in-frames.ts","lineNumber":14,"sourceCode":"export function validateDurationInFrames(\n\tdurationInFrames: unknown,\n\toptions: {\n\t\tcomponent: string;\n\t\tallowFloats: boolean;\n\t},\n): asserts durationInFrames is number {\n\tconst {allowFloats, component} = options;\n\tif (typeof durationInFrames === 'undefined') {\n\t\tthrow new Error(`The \"durationInFrames\" prop ${component} is missing.`);\n\t}\n\n\tif (typeof durationInFrames !== 'number') {\n\t\tthrow new Error(\n\t\t\t`The \"durationInFrames\" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`,\n\t\t);\n\t}\n\n\tif (durationInFrames <= 0) {\n\t\tthrow new TypeError(\n\t\t\t`The \"durationInFrames\" prop ${component} must be positive, but got ${durationInFrames}.`,\n\t\t);\n\t}\n\n\tif (!allowFloats && durationInFrames % 1 !== 0) {\n\t\tthrow new TypeError(\n\t\t\t`The \"durationInFrames\" prop ${component} must be an integer, but got ${durationInFrames}.`,\n\t\t);\n\t}\n\n\tif (!Number.isFinite(durationInFrames)) {\n\t\tthrow new TypeError(","sourceCodeStart":1,"sourceCodeEnd":32,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/validation/validate-duration-in-frames.ts#L1-L32","documentation":"`validateDurationInFrames` requires `durationInFrames` to be a `number`. A defined-but-non-number value (string, object, array, boolean) throws 'must be a number'. This is distinct from the missing/undefined case.","triggerScenarios":"Passing `durationInFrames` as a string (`'150'`) or any non-number type to `<Composition>`, `<Series.Sequence>`, or `<Loop>`; or `calculateMetadata` returning a string duration.","commonSituations":"Reading duration from props/config/env as a string and passing it through; JSON input props where duration was serialized as a string; a refactor that changes the type.","solutions":["Pass a numeric literal or coerce: `durationInFrames={Number(value)}`.","Type the prop as `number` so TypeScript flags mismatches.","Parse string sources with `parseInt`/`Number` and validate."],"exampleFix":"// before\nconst dur = inputProps.duration; // '150'\n<Composition durationInFrames={dur} ... />\n// after\nconst dur = Number(inputProps.duration);\n<Composition durationInFrames={dur} ... />","handlingStrategy":"type-guard","validationCode":"if (typeof d !== 'number') { throw new Error('duration must be a number'); }","typeGuard":"const isDurationNumber = (d) => typeof d === 'number';","tryCatchPattern":null,"preventionTips":["Coerce string-sourced durations with Number().","Keep inputProps schema typed so duration is a number."],"tags":["validation","composition","duration","type","series","loop"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}