{"record":{"id":"dec954e0bd06dcdc","repo":"remotion-dev/remotion","slug":"component-owned-element-initial-style-must-be-an-object","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":null,"httpStatus":null,"severity":"error","filePath":"packages/browser-studio/src/browser-studio-operations.ts","lineNumber":2036,"sourceCode":"\t\t\t\t\tcomponentOwnsSequence &&\n\t\t\t\t\trequest.element.initialProps !== null &&\n\t\t\t\t\t['from', 'durationInFrames', 'name'].some((prop) =>\n\t\t\t\t\t\tObject.hasOwn(request.element.initialProps ?? {}, prop),\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t'Component-owned Element initial props must not override from, durationInFrames, or name',\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tcomponentOwnsSequence &&\n\t\t\t\t\trequest.element.initialProps?.style !== undefined &&\n\t\t\t\t\t(request.element.initialProps.style === null ||\n\t\t\t\t\t\ttypeof request.element.initialProps.style !== 'object' ||\n\t\t\t\t\t\tArray.isArray(request.element.initialProps.style))\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t'Component-owned Element initial style must be an object',\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst originalProject = getProject();\n\t\t\t\tlet project = originalProject;\n\t\t\t\tif (request.newComposition !== null) {\n\t\t\t\t\tif (request.newComposition.codemod.newId !== request.compositionId) {\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t'New composition ID does not match installation target',\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst absolutePath = resolveCodemodTargetFile({\n\t\t\t\t\t\tcodemod: request.newComposition.codemod,\n\t\t\t\t\t\tproject,\n\t\t\t\t\t\tsymbolicatedStack: request.newComposition.symbolicatedStack,\n\t\t\t\t\t});","sourceCodeStart":2018,"sourceCodeEnd":2054,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/browser-studio/src/browser-studio-operations.ts#L2018-L2054","documentation":"For component-owned Sequences, the Element's initialProps.style must be a plain object if present, since it is forwarded as React inline style. Null, arrays, or primitives are rejected so the codemod never writes invalid style values into user source files.","triggerScenarios":"A browser-studio install request where request.element.initialProps.style is null, an array, or a non-object (string/number) while the target Sequence is component-owned.","commonSituations":"Tooling serializing CSS style strings into initialProps; agents emitting style: [...] or style: null placeholders.","solutions":["Change initialProps.style to a plain object of CSS properties.","Move non-object styling to a dedicated prop of the Element component instead of style.","Validate the request payload before submitting the operation."],"exampleFix":"// before\ninitialProps: {style: 'color: red'}\n// after\ninitialProps: {style: {color: 'red'}}","handlingStrategy":"validation","validationCode":"const s = initialProps?.style;\nif (s !== undefined && (s === null || typeof s !== 'object' || Array.isArray(s)))\n  throw new Error('style must be a plain object');","typeGuard":"const isStyleObject = (s: unknown): s is React.CSSProperties =>\n  typeof s === 'object' && s !== null && !Array.isArray(s);","tryCatchPattern":"try {\n  await applyOperation(request);\n} catch (e) {\n  if (String(e).includes('initial style')) sanitizeStyle(request);\n}","preventionTips":["Parse CSS strings into objects before assigning to style.","Reject null/array styles at request-construction time.","Type initialProps.style as React.CSSProperties | undefined."],"tags":["validation","studio","style"],"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"}