Cannot create because it already exists

Error message

Cannot create ${path.relative(
							remotionRoot,
							componentFilePath,
						)} because it already exists

What it means

When a new composition is created, the route generates a component file <componentName>.tsx next to the registration file. If a file at that path already exists on disk, creating it would overwrite user code, so the route throws with the relative path of the offending file.

Solutions

Choose a different component name / installationName so the generated file is unique
Delete or rename the existing <componentName>.tsx if it is a leftover artifact
Complete the previously interrupted insert (which may have left the file behind) before retrying

Example fix

// before
newComposition.codemod.componentName = 'MyTitle'; // src/MyTitle.tsx already exists
// after
newComposition.codemod.componentName = 'MyTitle2';

Defensive patterns

Strategy: validation

Validate before calling

const componentFile = path.join(path.dirname(registrationFilePath), componentName + '.tsx');
if (existsSync(componentFile)) {
  componentName = componentName + '-' + Date.now(); // or abort
}

Try / catch

try {
  await insertElement(payload);
} catch (e) {
  if (/because it already exists/.test(e.message)) {
    payload.newComposition.codemod.componentName = uniquify(payload.newComposition.codemod.componentName);
  }
}

Prevention

Check existsSync on the target component path before inserting
Use unique installation names to avoid component name collisions
Clean up leftovers from previously interrupted insertions

When it happens

Trigger: POSTing to insert-element with newComposition.codemod.componentName matching a file that already exists in the registration file's directory (path.dirname(registrationFilePath)/<componentName>.tsx).

Common situations: Re-inserting an element with the same generated component name after a previous partial installation, or the generated name colliding with an existing component file the user wrote by hand.

Understand the failure class

Background: "already exists" / EEXIST / FileAlreadyExistsException: what the 'file already exists' error means and how to fix it — this error's family across 37 libraries.

Related errors

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

Appendix: source

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

				if (registrationFilePath === null) {
					throw new Error('Cannot find file for composition in project');
				}

				checkIfTypeScriptFile(registrationFilePath);
				if (
					path.resolve(remotionRoot, compositionFile) !== registrationFilePath
				) {
					throw new Error(
						'New composition source does not match installation target',
					);
				}

				const componentFilePath = path.join(
					path.dirname(registrationFilePath),
					`${newComposition.codemod.componentName}.tsx`,
				);
				if (existsSync(componentFilePath)) {
					throw new Error(
						`Cannot create ${path.relative(
							remotionRoot,
							componentFilePath,
						)} because it already exists`,
					);
				}

				const registrationFileOldContents = readFileSync(
					registrationFilePath,
					'utf-8',
				);
				const registrationFileNewContents = await applyCodemodToFile({
					filePath: registrationFilePath,
					codeMod: newComposition.codemod,
				});
				const componentFileContents = await formatNewCompositionFile(
					newComposition.codemod,
				);

View on GitHub (pinned to 46a3a6bf13)