{"record":{"id":"f18a36cc3dfc3882","repo":"remotion-dev/remotion","slug":"colors-must-be-an-array-with-at-least-2-colors-f18a36","errorCode":null,"errorMessage":"\"colors\" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}","messagePattern":"\"colors\" must be an array with at least 2 colors, but got (.+?)","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/effects/src/waves.ts","lineNumber":231,"sourceCode":"\t\t);\n\t}\n};\n\nconst validateNonNegative = (value: number, name: string): void => {\n\tif (value < 0) {\n\t\tthrow new TypeError(\n\t\t\t`\"${name}\" must be greater than or equal to 0, but got ${JSON.stringify(value)}`,\n\t\t);\n\t}\n};\n\nconst validateColors = (colors: unknown): void => {\n\tif (colors === undefined) {\n\t\treturn;\n\t}\n\n\tif (!Array.isArray(colors) || colors.length < 2) {\n\t\tthrow new TypeError(\n\t\t\t`\"colors\" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`,\n\t\t);\n\t}\n\n\tfor (let i = 0; i < colors.length; i++) {\n\t\tassertRequiredColor(colors[i], `colors[${i}]`);\n\t}\n};\n\nconst validateDirection = (direction: unknown): void => {\n\tif (direction === undefined) {\n\t\treturn;\n\t}\n\n\tif (\n\t\ttypeof direction !== 'string' ||\n\t\t!WAVE_DIRECTIONS.includes(direction as WavesDirection)\n\t) {","sourceCodeStart":213,"sourceCodeEnd":249,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/waves.ts#L213-L249","documentation":"Thrown by validateColors() during waves() effect param validation. The waves effect requires the colors array to have at least 2 entries (the stripe pattern alternates between colors). This TypeError fires when colors is not an array, is an empty array, or has only one element. The error includes the received value via JSON.stringify for diagnostics.","triggerScenarios":"Called from validateWavesParams() at packages/effects/src/waves.ts:258 via validateColors(params.colors). Fires when you pass waves({colors: []}), waves({colors: ['#fff']}), or waves({colors: 'red'}). If colors is omitted entirely (undefined), the default ['#dff4ff', '#7cc6ff'] is used and no error is thrown.","commonSituations":"Passing a single-element color array expecting a solid color (the effect needs at least two to form stripes); passing colors as a string instead of an array; dynamically generating the colors array from data that happens to have one entry; accidentally spreading an empty array.","solutions":["Provide at least two colors: waves({colors: ['#fff', '#000']}).","If your data has fewer than 2 colors, pad it or fall back to the default by omitting the colors param.","If you want a single-color effect, use a different effect (e.g., a solid overlay) rather than waves().","Validate the array length in your own code before passing it: colors.length >= 2 ? colors : undefined."],"exampleFix":"// before\nimport {waves} from '@remotion/effects';\nwaves({colors: ['#ff0000']})   // throws — only 1 color\nwaves({colors: []})             // throws — empty\nwaves({colors: 'red'})          // throws — not an array\n\n// after\nwaves({colors: ['#ff0000', '#00ff00']})  // valid — 2 colors\nwaves({colors: palette.length >= 2 ? palette : undefined})  // fall back to default","handlingStrategy":"validation","validationCode":"import type {WavesParams} from '@remotion/effects';\n\nconst safeColors = (colors: WavesParams['colors']): readonly string[] | undefined => {\n  if (colors === undefined) return undefined;\n  if (!Array.isArray(colors) || colors.length < 2) {\n    // Fall back to default rather than throw\n    return undefined;\n  }\n  return colors;\n};\n\nconst colors = safeColors(myColors);\nwaves({colors});","typeGuard":"const isValidColorsArray = (colors: unknown): colors is readonly string[] =>\n  Array.isArray(colors) && colors.length >= 2 &&\n  colors.every((c) => typeof c === 'string');","tryCatchPattern":null,"preventionTips":["Always provide at least 2 colors when specifying the colors array.","Dynamically check array length before passing: colors.length >= 2 ? colors : undefined.","Use the WavesParams type for compile-time checking of array structure."],"tags":["validation","waves-effect","typescript","params","colors","typeerror"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}