remotion-dev/remotion · error

Composition source changed during Element installation

Error message

Composition source changed during Element installation

What it means

The Remotion Studio server detects, at the final step of installing an Element into a composition, that the composition's registration file contents no longer match what was read when the installation began, or that the component file now exists. This guard prevents inserting an Element into a composition whose source has been modified concurrently, which could produce a corrupted or inconsistent composition definition. The server aborts the mutation instead of applying it to stale contents.

Solutions

  1. Undo or re-save your composition edits so the registration file matches its pre-install state, then retry the Element installation
  2. Delete the component file created by the interrupted install if you do not want it, then retry
  3. Retry the insertion when the editor is idle and autosave/format-on-save is paused
  4. Restart the Studio server so it re-reads current file state, then re-attempt the install

Example fix

// before: editing the composition while Studio inserts the Element
// after: let the install finish before saving
// 1. trigger the Element install in Studio
// 2. do NOT save/modify the composition registration file until the install completes
Defensive patterns

Strategy: validation

Validate before calling

// before triggering insert, compare current file to expected
import {readFileSync, existsSync} from 'fs';
if (readFileSync(registrationFilePath, 'utf-8') !== expectedContents || existsSync(componentFilePath)) {
  throw new Error('Composition source changed; resolve before inserting');
}

Try / catch

try {
  await insertElement(payload);
} catch (e) {
  if (e.message.includes('Composition source changed')) {
    // refresh file state and retry
  }
}

Prevention

When it happens

Trigger: Calling the insert-element API route while the composition's registrationFilePath on disk differs from the recorded registrationFileOldContents, or while the target componentFilePath already exists on disk — i.e. the user (or an editor/HMR process) saved or created files during the Element installation.

Common situations: A developer edits and saves the composition file (e.g. in VS Code autosave) while Studio is installing an Element; a file watcher/formatter rewrites the registration file mid-operation; a partially completed previous install left the component file behind.

Understand the failure class

Background: "Invalid state transition" errors: "status must be X, actually Y", "already rejected/charging/uninstalled", "cannot ... while running" — what they mean when a library rejects your call — this error's family across 31 libraries.

Related errors


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

Appendix: source

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

				);
			}

			if (
				!hasExpectedFileState({
					actual: finalPlan.expectedFileState,
					expected: plan.expectedFileState,
				})
			) {
				throw new Error('Element source changed during installation');
			}

			if (
				compositionCreation !== null &&
				(readFileSync(compositionCreation.registrationFilePath, 'utf-8') !==
					compositionCreation.registrationFileOldContents ||
					existsSync(compositionCreation.componentFilePath))
			) {
				throw new Error(
					'Composition source changed during Element installation',
				);
			}

			const nodePathMutation = broadcastSequenceNodePathMutation(
				[
					{
						absolutePath: inserted.fileName,
						remappings: inserted.nodePathRemappings,
					},
				],
				null,
			);

			pushTransactionToUndoStack({
				snapshots: [
					...(compositionCreation === null
						? []

View on GitHub (pinned to 46a3a6bf13)