What causes "Element source file conflicts with the composition file" in remotion-dev/remotion?

Change the element slug so its generated file name differs from the composition file.

remotion-dev/remotion · error · Error

Element source file conflicts with the composition file

Error message

Element source file conflicts with the composition file

What it means

The element install plan places the new element file next to the target composition as dirname(target.fileName)/elementFileName. If that computed path equals the composition file itself, installing the element would overwrite the composition source, so the operation aborts with this conflict error.

Source

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

			: null;
	const compositionFile =
		destination.type === 'new-composition' &&
		destination.compositionFile === null
			? rootFile
			: destination.compositionFile;
	if (compositionFile === null) {
		throw new Error('Could not find the root file of the project');
	}

	const destinationCompositionFilePath = findProjectFile({
		filePath: compositionFile,
		project,
	});
	const elementSiblingFilePath =
		target?.fileName ?? destinationCompositionFilePath;
	const elementFilePath = `${dirname(elementSiblingFilePath)}/${elementFileName}`;
	if (elementFilePath === elementSiblingFilePath) {
		throw new Error('Element source file conflicts with the composition file');
	}

	const existingSource = project.files[elementFilePath] ?? null;
	const expectedFileState: ElementInstallExpectedFileState =
		existingSource === null
			? {exists: false}
			: {
					exists: true,
					sourceHash: await getElementSourceHash(existingSource),
				};

	return {
		componentName,
		destinationCompositionFilePath,
		elementFilePath,
		existingSource,
		expectedFileState,
		filePath: relativeToRoot(elementFilePath, project.rootDir),

View on GitHub (pinned to b2f4e34732)

Solutions

Change the element slug so its generated file name differs from the composition file.
Rename the composition component's file so the two paths no longer collide.
Install the element into a different composition or directory.

Defensive patterns

Strategy: validation

Validate before calling

const elementFileName = `${slug}.element.tsx`; // matches slug-derived name
const targetDir = compositionFilePath.slice(0, compositionFilePath.lastIndexOf('/'));
const elementFilePath = `${targetDir}/${elementFileName}`;
if (elementFilePath === compositionFilePath) {
  // pick a different slug or composition before calling prepareElementInstall
}

Prevention

Avoid slugs equal to the target composition file's base name.
After renaming compositions, re-check planned element install paths.
Surface slug choice in the UI so users can resolve collisions themselves.

When it happens

Trigger: prepareElementInstall where the slug-derived element file name resolves to exactly the same path as the composition component's file — e.g. the target composition is defined in a file whose name matches the element's generated file name (slug 'my-comp' resolving to src/my-comp.element.tsx when the composition component itself lives in src/my-comp.element.tsx).

Common situations: Installing an element whose slug collides with the target composition file name; re-installing an element after the composition was renamed to match the element's file name.

Related errors

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-08-28). Data as JSON: /api/errors/560df12b68ea2166. Report an issue: GitHub.