{"record":{"id":"7ce04f0215262076","repo":"remotion-dev/remotion","slug":"unsupported-browser-studio-require-id","errorCode":null,"errorMessage":"Unsupported Browser Studio require: ${id}","messagePattern":"Unsupported Browser Studio require: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/browser-studio/src/virtual-files.ts","lineNumber":137,"sourceCode":"if (typeof globalThis === 'undefined') {\n  window.React = React;\n} else {\n  globalThis.React = React;\n}\n`;\n\nconst browserRequireShim = `import * as Remotion from 'remotion';\nimport * as RemotionNoReact from 'remotion/no-react';\n\nconst modules = {\n  remotion: Remotion,\n  'remotion/no-react': RemotionNoReact,\n};\n\nglobalThis.require = (id) => {\n  const module = modules[id];\n  if (!module) {\n    throw new Error('Unsupported Browser Studio require: ' + id);\n  }\n\n  return module;\n};\n`;\n\nexport const getBrowserStudioVirtualFiles = (): Record<string, string> => {\n\tconst reactRefreshFiles = getInjectedReactRefreshFiles();\n\n\treturn {\n\t\t[browserStudioVirtualFilePaths.browserRequireShim]: browserRequireShim,\n\t\t[browserStudioVirtualFilePaths.reactRefreshEntry]: reactRefreshFiles.entry,\n\t\t[browserStudioVirtualFilePaths.reactRefreshRuntime]:\n\t\t\treactRefreshFiles.runtime,\n\t\t[browserStudioVirtualFilePaths.reactRefreshUtils]: reactRefreshFiles.utils,\n\t\t[browserStudioVirtualFilePaths.setupEnvironment]:\n\t\t\tgetInjectedSetupEnvironment(),\n\t\t[browserStudioVirtualFilePaths.setupSequenceStackTraces]:","sourceCodeStart":119,"sourceCodeEnd":155,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/browser-studio/src/virtual-files.ts#L119-L155","documentation":"Thrown by the Browser Studio's injected `require` shim, which only whitelists `remotion` and `remotion/no-react`. Any `require('<id>')` call in user code running inside the Browser Studio sandbox hits this shim, which only resolves the two pre-imported Remotion namespaces. The error reports the offending module id. It exists because Browser Studio bundles modules virtually rather than using a real Node resolver, so arbitrary npm requires cannot be satisfied.","triggerScenarios":"User composition code executed in Browser Studio calls `require()` (or a dependency calls `require()`) with an id other than 'remotion' or 'remotion/no-react'. Common with libraries authored as CJS that call `require('react')`, `require('react-dom')`, or third-party packages at runtime.","commonSituations":"Porting a Node-style composition that uses `require()` instead of ESM `import`; importing a third-party CJS dependency that internally calls `require()`; referencing `@remotion/*` subpaths (e.g. `@remotion/shapes`) instead of importing from `remotion`.","solutions":["Replace any `require('x')` calls in your composition with ESM `import` statements resolved at build time.","If a dependency uses `require()` internally, switch to an ESM build of that dependency or bundle it before Browser Studio loads it.","Confirm the only `require()` ids used are exactly 'remotion' or 'remotion/no-react'; any other id is unsupported.","Prefer `import {...} from 'remotion'` for all Remotion APIs rather than `require('remotion')`."],"exampleFix":"// before\nconst {useCurrentFrame} = require('remotion');\nconst foo = require('foo');\n\n// after\nimport {useCurrentFrame} from 'remotion';\nimport foo from 'foo';","handlingStrategy":"validation","validationCode":"// Browser Studio only resolves 'remotion' and 'remotion/no-react'.\nconst ALLOWED = new Set(['remotion', 'remotion/no-react']);\nfunction safeRequire(id: string) {\n  if (!ALLOWED.has(id)) {\n    throw new Error(`Browser Studio cannot require '${id}'. Use an ESM import instead.`);\n  }\n  return (globalThis as any).require(id);\n}","typeGuard":"const isBrowserStudioAllowedRequire = (id: string): boolean =>\n  id === 'remotion' || id === 'remotion/no-react';","tryCatchPattern":"try {\n  const mod = (globalThis as any).require(id);\n} catch (e) {\n  // Convert to an ESM import path; do not retry the same require.\n  throw new Error(`Refactor require('${id}') to an ESM import for Browser Studio.`);\n}","preventionTips":["Author compositions as ESM with static imports only.","Audit third-party deps for runtime require() calls before using them in Browser Studio.","Lint for require() usage in composition source."],"tags":["browser-studio","esm","require","modules"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}