{"record":{"id":"03894a9ed1b8088c","repo":"remotion-dev/remotion","slug":"component-owned-element-initial-style-must-be-an-object-03894a","errorCode":null,"errorMessage":"Component-owned Element initial style must be an object","messagePattern":"Component-owned Element initial style must be an object","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/studio-server/src/preview-server/routes/insert-element.ts","lineNumber":112,"sourceCode":"\t\t\t\tcomponentOwnsSequence &&\n\t\t\t\telement.initialProps !== null &&\n\t\t\t\t['from', 'durationInFrames', 'name'].some((prop) =>\n\t\t\t\t\tObject.hasOwn(element.initialProps ?? {}, prop),\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'Component-owned Element initial props must not override from, durationInFrames, or name',\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tcomponentOwnsSequence &&\n\t\t\t\telement.initialProps?.style !== undefined &&\n\t\t\t\t(element.initialProps.style === null ||\n\t\t\t\t\ttypeof element.initialProps.style !== 'object' ||\n\t\t\t\t\tArray.isArray(element.initialProps.style))\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'Component-owned Element initial style must be an object',\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tRenderInternals.Log.trace(\n\t\t\t\t{indent: false, logLevel},\n\t\t\t\t`[insert-element] Received request for compositionFile=\"${compositionFile}\" compositionId=\"${compositionId}\" element=\"${element.slug}\"`,\n\t\t\t);\n\n\t\t\tlet compositionCreation: {\n\t\t\t\tcomponentFilePath: string;\n\t\t\t\tcomponentFileContents: string;\n\t\t\t\tregistrationFilePath: string;\n\t\t\t\tregistrationFileOldContents: string;\n\t\t\t\tregistrationFileNewContents: string;\n\t\t\t} | null = null;\n\t\t\tlet sourceFileOverrides: ReadonlyMap<string, string> | null = null;\n","sourceCodeStart":94,"sourceCodeEnd":130,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/studio-server/src/preview-server/routes/insert-element.ts#L94-L130","documentation":"For a component-owned Element, initialProps.style (if provided) must be a non-null, non-array object that can be merged into the Element's style. The route throws when style is null, not an object, or an array.","triggerScenarios":"POSTing to insert-element where componentOwnsSequence is true and element.initialProps.style is null, a primitive (e.g. a string), or an array.","commonSituations":"Generated requests serializing style as a JSON string ('{\"width\": 100}') or as an array of style objects instead of a single merged object.","solutions":["Pass style as a plain object, e.g. {width: 100}","Omit the style key entirely if no initial style is needed","Parse stringified CSS-in-JSON into a real object before sending the request"],"exampleFix":"// before\ninitialProps: { style: '{\"width\": 100}' }\n// after\ninitialProps: { style: { width: 100 } }","handlingStrategy":"type-guard","validationCode":"if (el.initialProps?.style != null && (typeof el.initialProps.style !== 'object' || Array.isArray(el.initialProps.style))) {\n  throw new TypeError('style must be a plain object');\n}","typeGuard":"const isStyleObject = (s: unknown): s is Record<string, string | number> =>\n  typeof s === 'object' && s !== null && !Array.isArray(s);","tryCatchPattern":"try {\n  await insertElement(payload);\n} catch (e) {\n  if (/initial style must be an object/.test(e.message)) {\n    payload.element.initialProps.style = JSON.parse(String(payload.element.initialProps.style));\n  }\n}","preventionTips":["Always serialize style as a JSON object, never a string or array","Validate request payloads against the Element schema before sending","Omit the style key when there is no initial style"],"tags":["validation","insert-element","style"],"backgroundTag":"type-mismatch","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"}