remotion-dev/remotion · error · Error

File with name ${assetPath} already exists and is different

Error message

File with name ${assetPath} already exists and is different

What it means

The imported asset's path is derived deterministically from the URL basename and the sniffed file type by getRemoteAssetFilename(). If a public file already exists at that path but its size differs from the freshly downloaded bytes, Browser Studio refuses to overwrite it. Re-importing the byte-identical file is idempotent (created: false); importing a different file that maps to the same name is an error.

Source

Thrown at packages/browser-studio/src/download-remote-asset.ts:142

		throw error;
	} finally {
		clearTimeout(timeout);
	}

	const fileType = detectFileType(contents);
	if (!isImageFileType(fileType)) {
		throw new Error('Remote asset is not a supported image');
	}

	const assetPath = getRemoteAssetFilename({fileType, url});
	const existing = Object.entries(getProject().publicFiles ?? {}).find(
		([path]) => path.replace(/^\/+/, '') === assetPath,
	)?.[1];
	if (
		existing !== undefined &&
		getPublicFileSize(existing) !== contents.byteLength
	) {
		throw new Error(
			`File with name ${assetPath} already exists and is different`,
		);
	}

	if (existing === undefined) {
		await writeStaticFile({
			contents: contents.slice().buffer,
			filePath: assetPath,
		});
	}

	return {
		assetPath,
		created: existing === undefined,
		element: getRemoteAssetElement({assetPath, fileType}),
		sizeInBytes: contents.byteLength,
	};
};

View on GitHub (pinned to 10db9de073)

Solutions

  1. Delete or rename the existing public file with the same name, then import again
  2. Rename the remote asset (or its URL filename) so it no longer collides
  3. If the remote file legitimately changed, remove the stale copy from public/ first to accept the new bytes
  4. Re-import the exact same URL - identical files are deduplicated without error

Example fix

// before: importing a different image whose basename collides with public/poster.png
await downloadRemoteAssetInBrowserStudio({getProject, request: {url: 'https://other-site.example.com/poster.png'}, writeStaticFile});

// after: import the variant under a distinct filename
await downloadRemoteAssetInBrowserStudio({getProject, request: {url: 'https://other-site.example.com/poster-dark.png'}, writeStaticFile});
Defensive patterns

Strategy: validation

Validate before calling

const expectedName = decodeURIComponent(new URL(url).pathname.split('/').pop() ?? 'image');
const existing = Object.entries(project.publicFiles ?? {}).find(
  ([path]) => path.replace(/^\/+/, '') === expectedName,
)?.[1];
if (existing !== undefined) {
  // confirm with the user whether to delete/rename the existing public file before importing
  throw new Error(`A public file named ${expectedName} already exists - resolve the conflict first`);
}

Try / catch

try {
  await downloadRemoteAssetInBrowserStudio({getProject, request, writeStaticFile});
} catch (e) {
  if (/already exists and is different/.test(String((e as Error).message))) {
    // offer to delete the existing public file or import under a different URL/filename
  } else throw e;
}

Prevention

When it happens

Trigger: Calling downloadRemoteAssetInBrowserStudio when getProject().publicFiles already contains an entry whose path equals the computed assetPath (URL basename, sanitized, with the detected type's extension appended if missing) and whose byte length differs from the new download. Typical when two different images share a filename across URLs, or the remote file changed after a previous import.

Common situations: Importing hero.png from two different sites into the same project; the origin updated the image in place after the first import; two variants (light/dark) with the same basename.

Related errors

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