{"record":{"id":"14b09e0fb94b7569","repo":"remotion-dev/remotion","slug":"hueshift-must-be-a-finite-number-but-got-json","errorCode":null,"errorMessage":"\"hueShift\" must be a finite number, but got ${JSON.stringify(hueShift)}","messagePattern":"\"hueShift\" must be a finite number, but got (.+?)","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/light-leaks/src/LightLeak.tsx","lineNumber":282,"sourceCode":"\t}\n> = ({\n\tseed = 0,\n\thueShift = 0,\n\tdurationInFrames,\n\tstyle,\n\tcontrols,\n\t...sequenceProps\n}) => {\n\tconst {durationInFrames: videoDuration} = useVideoConfig();\n\tconst resolvedDuration = durationInFrames ?? videoDuration;\n\tif (typeof seed !== 'number' || !Number.isFinite(seed)) {\n\t\tthrow new TypeError(\n\t\t\t`\"seed\" must be a finite number, but got ${JSON.stringify(seed)}`,\n\t\t);\n\t}\n\n\tif (typeof hueShift !== 'number' || !Number.isFinite(hueShift)) {\n\t\tthrow new TypeError(\n\t\t\t`\"hueShift\" must be a finite number, but got ${JSON.stringify(hueShift)}`,\n\t\t);\n\t}\n\n\tif (hueShift < 0 || hueShift > 360) {\n\t\tthrow new RangeError(\n\t\t\t`\"hueShift\" must be between 0 and 360, but got ${hueShift}`,\n\t\t);\n\t}\n\n\treturn (\n\t\t<Sequence\n\t\t\tdurationInFrames={resolvedDuration}\n\t\t\tname=\"<LightLeak>\"\n\t\t\t_remotionInternalDocumentationLink=\"https://www.remotion.dev/docs/light-leaks/light-leak\"\n\t\t\tcontrols={controls}\n\t\t\t{...sequenceProps}\n\t\t\tstyle={style}","sourceCodeStart":264,"sourceCodeEnd":300,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/light-leaks/src/LightLeak.tsx#L264-L300","documentation":"LightLeak validates hueShift and throws TypeError if it is not a number or is not finite. hueShift rotates the color wheel of the leak, so a non-numeric value cannot be applied as a CSS/SVG hue rotation.","triggerScenarios":"Passing hueShift as a string ('120'), null, NaN, or Infinity; computing hueShift from input that may be undefined.","commonSituations":"Reading hueShift from controls/JSON as a string; CMS-driven props; arithmetic that produces NaN.","solutions":["Coerce with Number() and validate Number.isFinite before passing.","Clamp the computed hueShift into [0,360] before passing (also avoids error 1236).","Default to 0 when the source value is missing."],"exampleFix":"// before\n<LightLeak hueShift={hueStr} />\n// after\nconst hue = Number(hueStr);\n<LightLeak hueShift={Number.isFinite(hue) ? ((hue % 360) + 360) % 360 : 0} />","handlingStrategy":"validation","validationCode":"function toHueShift(v: unknown): number {\n  const n = typeof v === 'number' ? v : Number(v);\n  return Number.isFinite(n) ? Math.max(0, Math.min(360, n)) : 0;\n}","typeGuard":"const isFiniteNumber = (v: unknown): v is number =>\n  typeof v === 'number' && Number.isFinite(v);","tryCatchPattern":null,"preventionTips":["Coerce hueShift with Number() and validate Number.isFinite before passing.","Default to 0 when the source value is missing or invalid.","Range-check into [0,360] to also avoid error 1236.","Annotate props as `hueShift?: number` to catch string-typed values at compile time."],"tags":["typescript","light-leaks","validation","props","react"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}