{"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":162,"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\nconst studioPreviewEntry = `if (!globalThis.remotion_browserStudioVendor) {\n  throw new Error('Browser Studio vendor bundle was not loaded');\n}\n\nglobalThis.remotion_browserStudioProjectHot = {\n  addStatusHandler: (callback) => module.hot.addStatusHandler(callback),\n  apply: (options) => module.hot.apply(options),\n  check: (autoApply) => module.hot.check(autoApply),\n  getHash: () => __webpack_hash__,\n  status: () => module.hot.status(),\n};\n","sourceCodeStart":144,"sourceCodeEnd":180,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/browser-studio/src/virtual-files.ts#L144-L180","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":"b2f4e34732f3c6c222ea029413e22dc402218cd7","analyzedAt":"2026-08-12T17:18:50.444Z","contentChangedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}