remotion-dev/remotion · error · Error

Failed to load the Browser Studio vendor bundle: ${response.

Error message

Failed to load the Browser Studio vendor bundle: ${response.status}

What it means

The Browser Studio component fetches its vendor bundle (a local JS asset) and throws when the HTTP response status is not OK. This means the vendor bundle file could not be served, typically because it does not exist at the expected URL or the dev/static server returned an error page.

Source

Thrown at packages/browser-studio/src/BrowserStudio.tsx:468

				(sum, progress) =>
					sum + Math.min(progress.loadedBytes, progress.totalBytes ?? 0),
				0,
			);
			setLoadingProgress(total === 0 ? null : Math.min(0.95, loaded / total));
		};

		setLoadingProgress(0);
		// Start the large, stable vendor download alongside the compiler. The
		// iframe later executes these same bytes from a Blob URL, avoiding a
		// second request after compilation finishes.
		const vendorBundleAbortController = new AbortController();
		const vendorBundlePromise = useVendorBundle
			? fetch(localVendorEntryWithMarker, {
					signal: vendorBundleAbortController.signal,
				})
					.then(async (response) => {
						if (!response.ok) {
							throw new Error(
								`Failed to load the Browser Studio vendor bundle: ${response.status}`,
							);
						}

						const contentLength = Number(
							response.headers.get('content-length'),
						);
						const totalBytes =
							Number.isFinite(contentLength) && contentLength > 0
								? contentLength
								: null;
						updateLoadingProgress({
							asset: 'vendor-bundle',
							loadedBytes: 0,
							totalBytes,
						});
						if (!response.body) {
							const fallbackBlob = await response.blob();

View on GitHub (pinned to b2f4e34732)

Solutions

1. Verify the vendor bundle file exists at the URL being fetched (check the network tab for the failing request)
2. Rebuild the browser-studio vendor bundle so the local vendor entry is emitted
3. Ensure your static server serves the directory containing the vendor bundle with correct MIME types

const res = await fetch(vendorUrl, {method: 'HEAD'});
if (!res.ok) {
  // build/copy the vendor bundle before mounting BrowserStudio
  console.error('vendor bundle missing:', res.status);
}

catch (e) { if (e.message.startsWith('Failed to load the Browser Studio vendor bundle')) { /* rebuild vendor bundle, then retry mount */ } }

When it happens

Trigger: useVendorBundle is enabled and the fetch to localVendorEntryWithMarker returns a non-2xx status (404 because the vendor bundle was not built/copied, 500 from the server, or a redirect to an HTML error page).

Common situations: Using the browser-studio package without building its vendor bundle first, serving the app from a server that doesn't expose the vendor entry path, or a stale build cache referencing an old hashed filename.

Related errors

• Could not fetch remote asset. The URL may not allow cross-or
• Could not download remote asset: ${response.status}
• Failed to render GIF with source ${src}: "${error.message}".
• Failed to render GIF with source ${src}: "${error.message}".
• Failed to render GIF with source ${src}: "${error.message}".

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