remotion-dev/remotion · error · Error

Could not locate the composition component root

Error message

Could not locate the composition component root

What it means

When inserting a JSX element into a composition, the codemod locates the composition component's root JSX node to compute insertion offsets. If the root node was not found or has no source location (root?.loc missing), no insertion position can be computed and this error is thrown.

Solutions

1. Ensure the composition component returns JSX directly and the file contains the expected root element.
2. Check you are targeting the correct file/composition for the insertion.
3. If the component returns a variable, inline the JSX so a root node with location info exists.
4. Re-format the file so location metadata is stable, then rerun the codemod.

Example fix

// before -> root not locatable
const MyComp = () => renderContent();
// after
const MyComp = () => {
  return (
    <div>{/* insert target */}</div>
  );
};

const parsed = parse(compositionSource);
const root = findCompositionRoot(parsed);
if (!root || !root.loc) {
  throw new Error('Composition component has no locatable JSX root; cannot insert element');
}

try {
  insertJsxElementInComposition(opts);
} catch (e) {
  if (e instanceof Error && e.message === 'Could not locate the composition component root') {
    console.error('Verify the file contains the target composition returning JSX');
  } else throw e;
}

When it happens

Trigger: Calling the insert-JSX-element codemod against a file where the composition component root is missing — e.g. the component returns nothing renderable, the root is not a JSX element/fragment, or parsing located no root node for the given composition.

Common situations: Targeting a composition file that was heavily hand-edited; a component whose return statement is not JSX (returns null or a variable); pointing the codemod at the wrong file or composition ID.

Understand the failure class

Background: "Not found" and "does not exist" errors: why "Task not found", "No such folder", and "Can't find" fire when a lookup comes back empty — this error's family across 14 libraries.

Related errors

• 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 find a root JSX element
• Could not find a root JSX element

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

Appendix: source

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

		const nullIndent = getLineIndent({input, offset: nullStart});
		return {
			end: nullEnd,
			replacement: [
				'(',
				`${nullIndent}${unit}<>`,
				indentInsertedJsx({
					indent: `${nullIndent}${unit}${unit}`,
					insertion,
				}),
				`${nullIndent}${unit}</>`,
				`${nullIndent})`,
			].join(endOfLine),
			start: nullStart,
		};
	}

	if (!root?.loc) {
		throw new Error('Could not locate the composition component root');
	}

	if (insertInside) {
		const closing =
			root.type === 'JSXFragment' ? root.closingFragment : root.closingElement;
		if (!closing?.loc) {
			if (root.type !== 'JSXElement' || !root.openingElement.loc) {
				throw new Error('Could not locate the composition closing tag');
			}

			const openingStart = recastLocToOffset(
				input,
				root.openingElement.loc.start,
			);
			const openingEnd = recastLocToOffset(input, root.openingElement.loc.end);
			const openingIndent = getLineIndent({input, offset: openingStart});
			return {
				start: openingStart,

View on GitHub (pinned to 46a3a6bf13)