remotion-dev/remotion · error · Error

Unsupported Browser Studio require: ${id}

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.

Source

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

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;
};
`;

export const getBrowserStudioVirtualFiles = (): Record<string, string> => {
	const reactRefreshFiles = getInjectedReactRefreshFiles();

	return {
		[browserStudioVirtualFilePaths.browserRequireShim]: browserRequireShim,
		[browserStudioVirtualFilePaths.reactRefreshEntry]: reactRefreshFiles.entry,
		[browserStudioVirtualFilePaths.reactRefreshRuntime]:
			reactRefreshFiles.runtime,
		[browserStudioVirtualFilePaths.reactRefreshUtils]: reactRefreshFiles.utils,
		[browserStudioVirtualFilePaths.setupEnvironment]:
			getInjectedSetupEnvironment(),
		[browserStudioVirtualFilePaths.setupSequenceStackTraces]:

View on GitHub (pinned to 78fe4bb3fd)

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

• Invalid public file path: ${path}
• ${oldRelativePath} does not exist
• ${newRelativePath} already exists
• Browser Studio does not support saving sequence keyframes ye
• No published version is known for ${name}

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