remotion-dev/remotion · error

Element source file conflicts with the new composition file

Error message

Element source file conflicts with the new composition file

What it means

The computed install plan includes an elementFileName, and new-composition creation includes a componentFilePath placed next to the composition file. If the element source file path equals the composition's component file path, writing both would clobber the same file, so the route throws before any write occurs.

Solutions

1. Choose a distinct element file name so it doesn't equal the composition component file name
2. Regenerate the install plan after changing installationName
3. Verify safePaths in the request don't point both files at the same location

Example fix

// before
plan.elementFileName = 'MyTitle.tsx'; // same as componentFilePath basename
// after
plan.elementFileName = 'MyTitleElement.tsx';

const componentPath = path.join(path.dirname(plan.safePaths.compositionFileName), path.basename(compositionCreation.componentFilePath));
if (plan.elementFileName === componentPath) throw new Error('element file must differ from composition component file');

try {
  await insertElement(payload);
} catch (e) {
  if (/conflicts with the new composition file/.test(e.message)) {
    plan.elementFileName = uniquifyFileName(plan.elementFileName);
  }
}

When it happens

Trigger: POSTing to insert-element where plan.elementFileName === path.join(dirname(plan.safePaths.compositionFileName), basename(compositionCreation.componentFilePath)) — the element file name resolves to the same path as the newly generated composition component.

Common situations: A crafted or generated request where the element file name was set to the component file's basename, or unusual path configurations making the two computed paths coincide.

Related errors

• Cannot create because it already exists
• Element source file conflicts with the composition file
• Cannot find file for composition in project
• Component-owned Element initial props must not override…
• Component-owned Element initial style must be an object

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

Appendix: source

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

					success: false,
					type: 'file-conflict',
					conflict: {
						filePath: plan.filePath,
						existingSource: plan.existingElementSource,
						incomingSource: element.sourceCode,
					},
				};
			}

			if (
				compositionCreation !== null &&
				plan.elementFileName ===
					path.join(
						path.dirname(plan.safePaths.compositionFileName),
						path.basename(compositionCreation.componentFilePath),
					)
			) {
				throw new Error(
					'Element source file conflicts with the new composition file',
				);
			}

			const shouldWriteElementFile =
				!plan.elementFileExists || elementSourcesDiffer;
			const insertionInput = {
				remotionRoot,
				compositionFile,
				compositionId,
				element: {
					type: 'component' as const,
					componentName: plan.componentName,
					importName: plan.componentName,
					importPath: plan.importPath,
					props: [
						...Object.entries(element.initialProps ?? {}).map(
							([name, value]) => ({name, value}),

View on GitHub (pinned to 46a3a6bf13)