remotion-dev/remotion · error · Error

Could not insert Element

Error message

Could not insert Element

What it means

Surfaced by insertElement in @remotion/browser-studio (as `{success: false, type: 'error', reason}`) when the full installation pipeline — dependency resolution, JSX insertion, element file write — succeeded in memory, but `controller.applyMutation(...)` with node-path remappings returned null, so nothing was committed. Same failure class as 'Could not insert JSX element': the controller could not reconcile the node-path remappings with its tracked state.

Source

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

				if (getProject() !== project) {
					throw new Error(
						'Project changed during Element installation. Please try again.',
					);
				}

				const nodePathMutation = controller.applyMutation({
					timelineSelection: null,
					fileName: insertion.filePath,
					mutate: () => nextProject,
					nodePathMutationFiles: [
						{
							absolutePath: insertion.filePath,
							remappings: insertion.nodePathRemappings,
						},
					],
				});
				if (nodePathMutation === null) {
					throw new Error('Could not insert Element');
				}

				return {success: true, nodePathMutation};
			} catch (error) {
				return {
					success: false,
					type: 'error',
					reason: error instanceof Error ? error.message : String(error),
					stack: error instanceof Error ? (error.stack ?? '') : '',
				} satisfies InsertElementResponse;
			}
		},
		insertJsxElement,
		insertSolid: insertJsxElement,
		keyframes,
		packageInstallation,
		prepareElementInstall: async (request) => {
			try {

View on GitHub (pinned to b2f4e34732)

Solutions

1. Retry the insertElement once after re-reading current project state
2. Ensure inserts are serialized (await one before starting the next)
3. Check `res.type` in the failure response and surface `res.reason` to the user
4. If it persists on a freshly created project, capture the element payload and report a bug

Example fix

// before
const res = await operations.insertElement(request);

// after
let res = await operations.insertElement(request);
if (!res.success && res.type === 'error' && res.reason === 'Could not insert Element') {
  await resyncProjectState();
  res = await operations.insertElement(request); // one retry with fresh state
}
if (!res.success) showToast(res.reason ?? 'file conflict');

let res = await operations.insertElement(request);
if (!res.success && res.type === 'error' && res.reason === 'Could not insert Element') {
  await resyncProjectState();
  res = await operations.insertElement(request);
}
if (!res.success) showToast(res.reason ?? 'conflict');

When it happens

Trigger: Calling `insertElement(...)` while the controller's tracked node-path state is stale or diverged from `project.files`; concurrent insertions; installing an Element right after an operation whose remappings were not applied.

Common situations: Installing Remotion Elements from the gallery into an embedded Browser Studio session; rapid successive installs; session resumed after a project reload with stale controller state.

Related errors

• Could not insert JSX element
• Could not reorder sequence
• Could not split video from audio
• Element source changed during installation
• Could not add sequence keyframe

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