{"record":{"id":"a5e30d8b822d4304","repo":"remotion-dev/remotion","slug":"failed-to-load-the-browser-studio-vendor-bundle","errorCode":null,"errorMessage":"Failed to load the Browser Studio vendor bundle: ${response.status}","messagePattern":"Failed to load the Browser Studio vendor bundle: (.+?)","errorType":"http","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/browser-studio/src/BrowserStudio.tsx","lineNumber":468,"sourceCode":"\t\t\t\t(sum, progress) =>\n\t\t\t\t\tsum + Math.min(progress.loadedBytes, progress.totalBytes ?? 0),\n\t\t\t\t0,\n\t\t\t);\n\t\t\tsetLoadingProgress(total === 0 ? null : Math.min(0.95, loaded / total));\n\t\t};\n\n\t\tsetLoadingProgress(0);\n\t\t// Start the large, stable vendor download alongside the compiler. The\n\t\t// iframe later executes these same bytes from a Blob URL, avoiding a\n\t\t// second request after compilation finishes.\n\t\tconst vendorBundleAbortController = new AbortController();\n\t\tconst vendorBundlePromise = useVendorBundle\n\t\t\t? fetch(localVendorEntryWithMarker, {\n\t\t\t\t\tsignal: vendorBundleAbortController.signal,\n\t\t\t\t})\n\t\t\t\t\t.then(async (response) => {\n\t\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t\t`Failed to load the Browser Studio vendor bundle: ${response.status}`,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst contentLength = Number(\n\t\t\t\t\t\t\tresponse.headers.get('content-length'),\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst totalBytes =\n\t\t\t\t\t\t\tNumber.isFinite(contentLength) && contentLength > 0\n\t\t\t\t\t\t\t\t? contentLength\n\t\t\t\t\t\t\t\t: null;\n\t\t\t\t\t\tupdateLoadingProgress({\n\t\t\t\t\t\t\tasset: 'vendor-bundle',\n\t\t\t\t\t\t\tloadedBytes: 0,\n\t\t\t\t\t\t\ttotalBytes,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tif (!response.body) {\n\t\t\t\t\t\t\tconst fallbackBlob = await response.blob();","sourceCodeStart":450,"sourceCodeEnd":486,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/browser-studio/src/BrowserStudio.tsx#L450-L486","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","solutions":["Verify the vendor bundle file exists at the URL being fetched (check the network tab for the failing request)","Rebuild the browser-studio vendor bundle so the local vendor entry is emitted","Ensure your static server serves the directory containing the vendor bundle with correct MIME types"],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const res = await fetch(vendorUrl, {method: 'HEAD'});\nif (!res.ok) {\n  // build/copy the vendor bundle before mounting BrowserStudio\n  console.error('vendor bundle missing:', res.status);\n}","typeGuard":null,"tryCatchPattern":"catch (e) { if (e.message.startsWith('Failed to load the Browser Studio vendor bundle')) { /* rebuild vendor bundle, then retry mount */ } }","preventionTips":["Build the vendor bundle as part of your build pipeline before deploying Browser Studio","Add a health check for the vendor entry URL in CI"],"tags":["browser-studio","vendor-bundle","fetch","http-status"],"backgroundTag":"asset-load-failed","analyzedSha":"b2f4e34732f3c6c222ea029413e22dc402218cd7","analyzedAt":"2026-08-28T15:39:09.316Z","contentChangedAt":"2026-08-28T15:39:09.316Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}