New composition component does not match installation target

Error message

New composition component does not match installation target

What it means

After performing the insertion, the route checks that for a new-composition installation, the file where the element was actually inserted (inserted.fileName) equals compositionCreation.componentFilePath — the file the codemod planned to write the component into. A mismatch means the element landed in a different file than the new component, so the installation is inconsistent and the route aborts.

Solutions

Regenerate the request so sourceFileOverrides and safePaths come from a single fresh plan
Ensure sourceFileOverrides do not redirect insertion away from the new component file
Retry with a clean payload built from the current project state (restart Studio if needed)

Example fix

// before
sourceFileOverrides = new Map([['src/Other.tsx', otherSrc]]); // redirects insertion
// after
sourceFileOverrides = null; // insert into compositionCreation.componentFilePath

Defensive patterns

Strategy: validation

Validate before calling

// ensure no override redirects insertion away from the component file
if (compositionCreation && [...(sourceFileOverrides?.keys() ?? [])].some((f) => path.resolve(f) !== path.resolve(compositionCreation.componentFilePath))) {
  sourceFileOverrides = null;
}

Try / catch

try {
  await insertElement(payload);
} catch (e) {
  if (/component does not match installation target/.test(e.message)) {
    payload = regenerateInsertPayload(installationName); // rebuild with consistent safePaths/overrides
  }
}

Prevention

Build the whole request from one plan generation pass
Avoid sourceFileOverrides that move insertion to a different file than the new component
Retry with a freshly generated payload instead of editing a failed one

When it happens

Trigger: POSTing to insert-element where resolveInsertion (given insertionType, safePaths, sourceFileOverrides) inserted the element into a file different from the new composition's componentFilePath.

Common situations: sourceFileOverrides redirecting the insertion to another file, safePaths computed differently between the plan and resolution steps, or stale request fields after a partial retry.

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

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

Appendix: source

Thrown at packages/studio-server/src/preview-server/routes/insert-element.ts:313

				wrapInSequence: componentOwnsSequence
					? null
					: {
							dimensions: element.dimensions,
							durationInFrames: element.durationInFrames,
							from,
							name: element.displayName,
							position,
						},
			};
			const inserted = await insertJsxElementIntoComposition({
				...insertionInput,
				sourceFileOverrides,
			});
			if (
				compositionCreation !== null &&
				inserted.fileName !== compositionCreation.componentFilePath
			) {
				throw new Error(
					'New composition component does not match installation target',
				);
			}

			const finalPlan = await getElementInstallPlan({
				installationName,
				destination: installDestination,
				element,
				entryPoint,
				remotionRoot,
			});
			if (
				finalPlan.safePaths.compositionFileName !==
				plan.safePaths.compositionFileName
			) {
				throw new Error(
					'Composition source changed during Element installation',
				);

View on GitHub (pinned to 46a3a6bf13)