remotion-dev/remotion · error · Error

Cannot create ${relativeToRoot(componentFilePath, project.ro

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.

Source

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

			const project = getProject();
			const absolutePath = resolveCodemodTargetFile({
				codemod,
				project,
				symbolicatedStack,
			});
			const input = project.files[absolutePath];
			const {newContents} = parseAndApplyCodemod({input, codeMod: codemod});
			const {output} = await formatCodemodFile({contents: newContents});
			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`,
					);
				}

				const componentFile = await formatCodemodFile({
					contents: makeNewCompositionComponentSource(codemod.componentName),
				});
				files[componentFilePath] = componentFile.output;
			}

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

			if (!dryRun) {
				controller.applyMutation({
					fileName: absolutePath,

View on GitHub (pinned to 8f97758157)

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,
});
Defensive patterns

Strategy: validation

Validate before calling

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);

Try / catch

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

Prevention

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


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