{"record":{"id":"45972e33100c6419","repo":"remotion-dev/remotion","slug":"initialprops-must-be-null-or-an-object-containing-json","errorCode":null,"errorMessage":"initialProps must be null or an object containing JSON-compatible values with valid JSX attribute names","messagePattern":"initialProps must be null or an object containing JSON-compatible values with valid JSX attribute names","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/studio-protocol/src/element-payload.ts","lineNumber":97,"sourceCode":"\t}\n\n\tif (!isDuration(input.durationInFrames))\n\t\tthrow new TypeError(\n\t\t\t'durationInFrames must be an integer between 1 and 100000000',\n\t\t);\n\tif (\n\t\tinput.installationMode !== undefined &&\n\t\tinput.installationMode !== 'wrapped' &&\n\t\tinput.installationMode !== 'component-owned-sequence'\n\t) {\n\t\tthrow new TypeError(\n\t\t\t'installationMode must be \"wrapped\" or \"component-owned-sequence\"',\n\t\t);\n\t}\n\n\tconst initialProps = input.initialProps ?? null;\n\tif (!isElementInitialProps(initialProps)) {\n\t\tthrow new TypeError(\n\t\t\t'initialProps must be null or an object containing JSON-compatible values with valid JSX attribute names',\n\t\t);\n\t}\n\n\tif (\n\t\t!hasValidElementInitialPropsForInstallationMode({\n\t\t\tinitialProps,\n\t\t\tinstallationMode: input.installationMode,\n\t\t})\n\t) {\n\t\tthrow new TypeError(\n\t\t\t'component-owned-sequence initialProps must not define from, durationInFrames, or name, and style must be an object when provided',\n\t\t);\n\t}\n};\n\nexport const createElementPayload = (\n\tinput: CreateElementPayloadInput,","sourceCodeStart":79,"sourceCodeEnd":115,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/studio-protocol/src/element-payload.ts#L79-L115","documentation":"createElementPayload validates its input via assertCreateElementPayloadInput; this TypeError is thrown when initialProps is neither null nor an object whose values are JSON-compatible and whose keys are valid JSX attribute names. It guarantees the generated Element's props can be rendered as static JSX attributes.","triggerScenarios":"Calling createElementPayload with initialProps set to a non-object (string, number, array, boolean), an object containing functions, symbols, undefined, or nested non-JSON values, or keys that are not valid JSX attribute names (e.g. containing dots, dashes-invalid or reserved characters).","commonSituations":"Programmatic Element payload creation where callers pass runtime prop values (callbacks, class instances) or accidentally omit null-coalescing for absent props; also raw API/scripted payload construction bypassing Studio's UI validation.","solutions":["Pass initialProps: null when there are no initial props","Ensure initialProps is a plain object with string values that JSON-serialize cleanly","Use keys that are valid JSX attribute names (letters/digits, camelCase, no special characters)","Validate/sanitize props before calling createElementPayload"],"exampleFix":"// before\ncreateElementPayload({..., initialProps: {onClick: () => {}, 'data-x.y': 1}});\n// after\ncreateElementPayload({..., initialProps: {volume: 0.5, loop: true}});","handlingStrategy":"validation","validationCode":"const isValidAttrName = (k: string) => /^[a-zA-Z][a-zA-Z0-9]*$/.test(k);\nconst valid = (p: unknown): boolean =>\n  p === null || (typeof p === 'object' && !Array.isArray(p) &&\n    Object.entries(p as Record<string, unknown>).every(([k, v]) =>\n      isValidAttrName(k) && (v === null || ['string','number','boolean'].includes(typeof v))));\nif (!valid(initialProps)) throw new Error('initialProps must be null or JSON-compatible with valid JSX attribute names');","typeGuard":"const isElementInitialProps = (v: unknown): v is Record<string, string | number | boolean | null> | null =>\n  v === null || (typeof v === 'object' && v !== null && !Array.isArray(v) &&\n    Object.entries(v).every(([k, val]) => /^[a-zA-Z][a-zA-Z0-9]*$/.test(k) && (val === null || ['string','number','boolean'].includes(typeof val))));","tryCatchPattern":"try {\n  const payload = createElementPayload(input);\n} catch (e) {\n  if (e instanceof TypeError && e.message.startsWith('initialProps must be null or an object')) {\n    return createElementPayload({...input, initialProps: sanitizeInitialProps(input.initialProps)});\n  }\n  throw e;\n}","preventionTips":["Pass null instead of omitting or using non-object initialProps","Strip functions, undefined, and nested objects that don't JSON-serialize","Use camelCase JSX-safe prop names"],"tags":["validation","props","payload"],"backgroundTag":"invalid-argument-value","analyzedSha":"46a3a6bf13ca367376ff18bbb06dae2e87e0d068","analyzedAt":"2026-09-18T00:12:20.256Z","contentChangedAt":"2026-09-18T00:12:20.256Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}