remotion-dev/remotion · error · Error

Cannot create because it already exists

Error message

Cannot create ${relativeToRoot(componentFilePath, project.rootDir)} because it already exists

What it means

Thrown by the applyCodemod operation of @remotion/browser-studio when a 'new-composition' codemod tries to generate the new component file `${componentName}.tsx` next to the resolved target file, but that exact path already exists in the virtual project's file map. Browser Studio never overwrites existing files with scaffolded composition components, so it aborts the whole codemod. The error is caught inside applyCodemod and returned as `{success: false, reason}` rather than propagated.

Solutions

1. Pick a different, unused componentName for the new composition
2. Delete or rename the existing `<componentName>.tsx` in the project files before re-running the codemod
3. List `project.files` (or use the file APIs) to confirm which paths are taken before submitting
4. If you genuinely want to regenerate the file, write it yourself via the project mutation API — applyCodemod has no overwrite flag

Example fix

// before
await operations.applyCodemod({
  codemod: {type: 'new-composition', componentName: 'Intro', /* ... */},
  dryRun: false,
  symbolicatedStack: null,
}); // fails if Intro.tsx exists

// after
const project = operations.getProject ? operations.getProject() : null;
// or track files from a project event; guard before creating
const base = `${rootDir}/src`;
if (project?.files[`${base}/Intro.tsx`] !== undefined) {
  throw new Error('Pick another name, Intro.tsx already exists');
}
await operations.applyCodemod({
  codemod: {type: 'new-composition', componentName: 'Intro2', /* ... */},
  dryRun: false,
  symbolicatedStack: null,
});

const componentFilePath = `${dirOfTargetFile}/${componentName}.tsx`;
if (project.files[componentFilePath] !== undefined) {
  // pick another name or delete the file first
  throw new Error(`${componentFilePath} already exists`);
}
const res = await operations.applyCodemod({codemod, dryRun: false, symbolicatedStack: null});
if (!res.success) console.error(res.reason);

applyCodemod does not throw for this case — check `res.success === false` and read `res.reason`. Only wrap for unexpected coding errors.

When it happens

Trigger: Calling `applyCodemod({codemod: {type: 'new-composition', componentName: 'MyComp', ...}})` when `${dirname(targetFile)}/MyComp.tsx` is already a key in `project.files`. Note the check uses the literal componentName, so a second call with the same name after a successful first call always fails.

Common situations: User creates a composition with the same name twice in one session; a UI retry after a partial success re-submits the same componentName; componentName differs from an existing file only by letter case; a previously deleted composition left its .tsx file behind.

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

• Could not find composition
• Could not find folder
• A folder cannot be moved inside itself
• A folder named " " already exists in the destination
• Applying visual controls is not supported in Browser Studio

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-08-22). Data as JSON: /api/errors/9e060468a4155f38. Report an issue: GitHub.

Appendix: source

Thrown at packages/browser-studio/src/browser-studio-operations.ts:1450

			});
			const input = project.files[absolutePath];
			const {newContents} = parseAndApplyCodemod({input, codeMod: codemod});
			const output =
				codemod.type === 'new-composition' ||
				codemod.type === 'duplicate-composition' ||
				codemod.type === 'rename-composition' ||
				codemod.type === 'delete-composition'
					? newContents
					: (await formatCodemodFile({contents: newContents})).output;
			const files: Record<string, string> = {
				...project.files,
				[absolutePath]: output,
			};

			if (codemod.type === 'new-composition') {
				const componentFilePath = `${dirname(absolutePath)}/${codemod.componentName}.tsx`;
				if (project.files[componentFilePath] !== undefined) {
					throw new Error(
						`Cannot create ${relativeToRoot(componentFilePath, project.rootDir)} because it already exists`,
					);
				}

				files[componentFilePath] = makeNewCompositionComponentSource(codemod);
			}

			const diff = simpleDiff({
				oldLines: input.split('\n'),
				newLines: output.split('\n'),
			});

			if (!dryRun) {
				controller.applyMutation({
					undoRedoNavigation,
					timelineSelection: null,
					fileName: absolutePath,
					nodePathMutationFiles: null,

View on GitHub (pinned to 46a3a6bf13)