{"record":{"id":"6e0170e8ca861a8f","repo":"remotion-dev/remotion","slug":"component-style-must-be-an-object-to-add-a-position","errorCode":null,"errorMessage":"Component style must be an object to add a position","messagePattern":"Component style must be an object to add a position","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/studio-codemods/src/insert-jsx-element.ts","lineNumber":1079,"sourceCode":"}: {\n\taddPositionStyle: boolean;\n\tfrom: number | null;\n\tlocalName: string;\n\tprops: ComponentProp[];\n\tposition: InsertableCompositionElementPosition | null;\n}): namedTypes.JSXElement => {\n\tconst styleProp = props.find((prop) => prop.name === 'style');\n\tconst propsWithoutStyle = addPositionStyle\n\t\t? props.filter((prop) => prop.name !== 'style')\n\t\t: props;\n\tlet styleAttribute: namedTypes.JSXAttribute | null = null;\n\tif (addPositionStyle) {\n\t\tconst styleExpression =\n\t\t\tstyleProp === undefined\n\t\t\t\t? recast.types.builders.objectExpression([])\n\t\t\t\t: parseValueExpression(styleProp.value);\n\t\tif (styleExpression.type !== 'ObjectExpression') {\n\t\t\tthrow new Error('Component style must be an object to add a position');\n\t\t}\n\n\t\tstyleExpression.properties = styleExpression.properties.filter(\n\t\t\t(property) => {\n\t\t\t\tif (property.type !== 'ObjectProperty') {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\tconst key =\n\t\t\t\t\tproperty.key.type === 'Identifier'\n\t\t\t\t\t\t? property.key.name\n\t\t\t\t\t\t: property.key.type === 'StringLiteral'\n\t\t\t\t\t\t\t? property.key.value\n\t\t\t\t\t\t\t: null;\n\t\t\t\treturn key !== 'position' && (position === null || key !== 'translate');\n\t\t\t},\n\t\t);\n\t\tstyleExpression.properties.push(...getPositionStyleProperties(position));","sourceCodeStart":1061,"sourceCodeEnd":1097,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/studio-codemods/src/insert-jsx-element.ts#L1061-L1097","documentation":"When inserting a JSX element with a position style, the codemod must manipulate the component's style attribute as an object expression. If a style prop already exists but its value is not an object literal (e.g. a variable, function call, or string), the codemod cannot merge position styles into it and throws this error.","triggerScenarios":"Inserting a JSX element with addPositionStyle enabled into a component whose style prop is set to a non-object value, such as style={myStyles}, style={getStyle()}, or a parsed value that is not an ObjectExpression.","commonSituations":"Inserting elements into components that use CSS-in-JS variables or style helper functions; styles defined via spread of external objects; codemods run against code where style comes from props.","solutions":["Inline an object literal for the style prop (e.g. style={{position: 'absolute', ...}}) before inserting elements with position styles.","Refactor the component to use a style object literal, or apply the position style manually after insertion.","Insert without addPositionStyle and set positioning yourself.","If styles come from a variable, spread them into a literal: style={{...myStyles}}."],"exampleFix":"// before -> throws\n<div style={dynamicStyles} />\n// after\n<div style={{...dynamicStyles, position: 'absolute', top: 0, left: 0}} />","handlingStrategy":"type-guard","validationCode":"const styleMatch = /style=\\{([^}]+)\\}/.exec(componentSource);\nconst styleValue = styleMatch && styleMatch[1].trim();\nif (styleValue && !styleValue.startsWith('{')) {\n  throw new Error(`style must be an object literal, got: ${styleValue}`);\n}","typeGuard":"const isStyleObjectLiteral = (expr: string): boolean => {\n  try { return parseExpression(expr).type === 'ObjectExpression'; }\n  catch { return false; }\n};","tryCatchPattern":"try {\n  insertJsxElement({...opts, addPositionStyle: true});\n} catch (e) {\n  if (e instanceof Error && e.message.includes('style must be an object')) {\n    insertJsxElement({...opts, addPositionStyle: false}); // insert, then style manually\n  } else throw e;\n}","preventionTips":["Keep style props as inline object literals in codemod-targeted components","Spread external style objects into literals instead of assigning them directly","Insert without position styling when styles are dynamic"],"tags":["jsx","codemod","style","type-mismatch"],"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"}