{"record":{"id":"560df12b68ea2166","repo":"remotion-dev/remotion","slug":"element-source-file-conflicts-with-the-composition","errorCode":null,"errorMessage":"Element source file conflicts with the composition file","messagePattern":"Element source file conflicts with the composition file","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/browser-studio/src/browser-studio-operations.ts","lineNumber":386,"sourceCode":"\t\t\t: null;\n\tconst compositionFile =\n\t\tdestination.type === 'new-composition' &&\n\t\tdestination.compositionFile === null\n\t\t\t? rootFile\n\t\t\t: destination.compositionFile;\n\tif (compositionFile === null) {\n\t\tthrow new Error('Could not find the root file of the project');\n\t}\n\n\tconst destinationCompositionFilePath = findProjectFile({\n\t\tfilePath: compositionFile,\n\t\tproject,\n\t});\n\tconst elementSiblingFilePath =\n\t\ttarget?.fileName ?? destinationCompositionFilePath;\n\tconst elementFilePath = `${dirname(elementSiblingFilePath)}/${elementFileName}`;\n\tif (elementFilePath === elementSiblingFilePath) {\n\t\tthrow new Error('Element source file conflicts with the composition file');\n\t}\n\n\tconst existingSource = project.files[elementFilePath] ?? null;\n\tconst expectedFileState: ElementInstallExpectedFileState =\n\t\texistingSource === null\n\t\t\t? {exists: false}\n\t\t\t: {\n\t\t\t\t\texists: true,\n\t\t\t\t\tsourceHash: await getElementSourceHash(existingSource),\n\t\t\t\t};\n\n\treturn {\n\t\tcomponentName,\n\t\tdestinationCompositionFilePath,\n\t\telementFilePath,\n\t\texistingSource,\n\t\texpectedFileState,\n\t\tfilePath: relativeToRoot(elementFilePath, project.rootDir),","sourceCodeStart":368,"sourceCodeEnd":404,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/browser-studio/src/browser-studio-operations.ts#L368-L404","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","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."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const elementFileName = `${slug}.element.tsx`; // matches slug-derived name\nconst targetDir = compositionFilePath.slice(0, compositionFilePath.lastIndexOf('/'));\nconst elementFilePath = `${targetDir}/${elementFileName}`;\nif (elementFilePath === compositionFilePath) {\n  // pick a different slug or composition before calling prepareElementInstall\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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."],"tags":["elements","file-conflict","filesystem"],"backgroundTag":"file-path-collision","analyzedSha":"b2f4e34732f3c6c222ea029413e22dc402218cd7","analyzedAt":"2026-08-28T15:39:09.316Z","contentChangedAt":"2026-08-28T15:39:09.316Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}