remotion-dev/remotion · error · Error

Component style must be an object to add a position

Error message

Component style must be an object to add a position

What it means

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.

Solutions

1. Inline an object literal for the style prop (e.g. style={{position: 'absolute', ...}}) before inserting elements with position styles.
2. Refactor the component to use a style object literal, or apply the position style manually after insertion.
3. Insert without addPositionStyle and set positioning yourself.
4. If styles come from a variable, spread them into a literal: style={{...myStyles}}.

Example fix

// before -> throws
<div style={dynamicStyles} />
// after
<div style={{...dynamicStyles, position: 'absolute', top: 0, left: 0}} />

const styleMatch = /style=\{([^}]+)\}/.exec(componentSource);
const styleValue = styleMatch && styleMatch[1].trim();
if (styleValue && !styleValue.startsWith('{')) {
  throw new Error(`style must be an object literal, got: ${styleValue}`);
}

const isStyleObjectLiteral = (expr: string): boolean => {
  try { return parseExpression(expr).type === 'ObjectExpression'; }
  catch { return false; }
};

try {
  insertJsxElement({...opts, addPositionStyle: true});
} catch (e) {
  if (e instanceof Error && e.message.includes('style must be an object')) {
    insertJsxElement({...opts, addPositionStyle: false}); // insert, then style manually
  } else throw e;
}

When it happens

Trigger: 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.

Common situations: 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.

Understand the failure class

Background: "Must be a positive integer", "Invalid value", "Unsupported": the invalid-argument-value error family, when a library rejects the value you pass — this error's family across 35 libraries.

Related errors

• Cannot duplicate a JSX element without a source location
• Cannot duplicate JSX element with no parent
• Cannot split a JSX sequence without a source location
• Cannot split JSX sequence with no parent
• Could not delete JSX nodes

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/6e0170e8ca861a8f. Report an issue: GitHub.

Appendix: source

Thrown at packages/studio-codemods/src/insert-jsx-element.ts:1079

}: {
	addPositionStyle: boolean;
	from: number | null;
	localName: string;
	props: ComponentProp[];
	position: InsertableCompositionElementPosition | null;
}): namedTypes.JSXElement => {
	const styleProp = props.find((prop) => prop.name === 'style');
	const propsWithoutStyle = addPositionStyle
		? props.filter((prop) => prop.name !== 'style')
		: props;
	let styleAttribute: namedTypes.JSXAttribute | null = null;
	if (addPositionStyle) {
		const styleExpression =
			styleProp === undefined
				? recast.types.builders.objectExpression([])
				: parseValueExpression(styleProp.value);
		if (styleExpression.type !== 'ObjectExpression') {
			throw new Error('Component style must be an object to add a position');
		}

		styleExpression.properties = styleExpression.properties.filter(
			(property) => {
				if (property.type !== 'ObjectProperty') {
					return true;
				}

				const key =
					property.key.type === 'Identifier'
						? property.key.name
						: property.key.type === 'StringLiteral'
							? property.key.value
							: null;
				return key !== 'position' && (position === null || key !== 'translate');
			},
		);
		styleExpression.properties.push(...getPositionStyleProperties(position));

View on GitHub (pinned to 46a3a6bf13)