remotion-dev/remotion · error · Error

Unsupported Browser Studio require

Error message

Unsupported Browser Studio require: ${id}

What it means

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.

Solutions

1. Replace any `require('x')` calls in your composition with ESM `import` statements resolved at build time.
2. If a dependency uses `require()` internally, switch to an ESM build of that dependency or bundle it before Browser Studio loads it.
3. Confirm the only `require()` ids used are exactly 'remotion' or 'remotion/no-react'; any other id is unsupported.
4. Prefer `import {...} from 'remotion'` for all Remotion APIs rather than `require('remotion')`.

Example fix

// before
const {useCurrentFrame} = require('remotion');
const foo = require('foo');

// after
import {useCurrentFrame} from 'remotion';
import foo from 'foo';

// Browser Studio only resolves 'remotion' and 'remotion/no-react'.
const ALLOWED = new Set(['remotion', 'remotion/no-react']);
function safeRequire(id: string) {
  if (!ALLOWED.has(id)) {
    throw new Error(`Browser Studio cannot require '${id}'. Use an ESM import instead.`);
  }
  return (globalThis as any).require(id);
}

const isBrowserStudioAllowedRequire = (id: string): boolean =>
  id === 'remotion' || id === 'remotion/no-react';

try {
  const mod = (globalThis as any).require(id);
} catch (e) {
  // Convert to an ESM import path; do not retry the same require.
  throw new Error(`Refactor require('${id}') to an ESM import for Browser Studio.`);
}

When it happens

Trigger: 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.

Common situations: 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`.

Related errors

• Browser Studio Remotion version is unavailable
• Cannot create because it already exists
• Cannot insert Element into this composition component
• Cannot resolve because the Browser Studio Remotion version…
• Could not add effect keyframe

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

Appendix: source

Thrown at packages/browser-studio/src/virtual-files.ts:162

if (typeof globalThis === 'undefined') {
  window.React = React;
} else {
  globalThis.React = React;
}
`;

const browserRequireShim = `import * as Remotion from 'remotion';
import * as RemotionNoReact from 'remotion/no-react';

const modules = {
  remotion: Remotion,
  'remotion/no-react': RemotionNoReact,
};

globalThis.require = (id) => {
  const module = modules[id];
  if (!module) {
    throw new Error('Unsupported Browser Studio require: ' + id);
  }

  return module;
};
`;

const studioPreviewEntry = `if (!globalThis.remotion_browserStudioVendor) {
  throw new Error('Browser Studio vendor bundle was not loaded');
}

globalThis.remotion_browserStudioProjectHot = {
  addStatusHandler: (callback) => module.hot.addStatusHandler(callback),
  apply: (options) => module.hot.apply(options),
  check: (autoApply) => module.hot.check(autoApply),
  getHash: () => __webpack_hash__,
  status: () => module.hot.status(),
};

View on GitHub (pinned to b2f4e34732)