remotion-dev/remotion · error · Error

Browser Studio Remotion version is unavailable

Error message

Browser Studio Remotion version is unavailable

What it means

Thrown by the dependency resolver inside the <BrowserStudio> React component. Every @remotion/* package installed into the virtual project must be pinned to one Remotion version, taken from remotionPackageSource.version when remotionPackageSource.type === 'release', otherwise from the build-time injected browserStudioDependencyVersions.remotion record (__BROWSER_STUDIO_DEPENDENCY_VERSIONS__). If neither source yields a version, dependency resolution cannot proceed and this error is thrown.

Source

Thrown at packages/browser-studio/src/BrowserStudio.tsx:276

	const updateProject = useCallback(
		(nextProject: BrowserStudioProps['project']) => {
			activeProjectRef.current = nextProject;
			setEditedProject({
				project: nextProject,
				sourceProject: incomingProjectRef.current,
			});
			onProjectChangeRef.current?.(nextProject);
		},
		[],
	);
	const resolveElementDependencies = useCallback(
		(dependencies: readonly {name: string; version: string | null}[]) => {
			const remotionVersion =
				remotionPackageSource?.type === 'release'
					? remotionPackageSource.version
					: browserStudioDependencyVersions.remotion;
			if (!remotionVersion) {
				throw new Error('Browser Studio Remotion version is unavailable');
			}

			const versions: Record<string, string> = {};
			const resolutions: Record<string, BrowserStudioDependencyResolution> = {};
			for (const dependency of dependencies) {
				const requestedVersion = dependency.name.startsWith('@remotion/')
					? remotionVersion
					: dependency.version;
				const customResolution = dependencyResolverRef.current?.({
					name: dependency.name,
					version: requestedVersion,
				});
				const customVersion =
					typeof customResolution === 'string' &&
					!customResolution.startsWith('http')
						? customResolution
						: typeof customResolution === 'object'
							? (customResolution?.version ?? null)

View on GitHub (pinned to b2f4e34732)

Solutions

  1. Pass remotionPackageSource={{type: 'release', baseUrl, version}} to <BrowserStudio> with a concrete published version.
  2. If building from source, inject __BROWSER_STUDIO_DEPENDENCY_VERSIONS__ (see dev/get-dependency-versions-for-build.ts) with a 'remotion' entry via your bundler's define/globals.
  3. Consume the published artifact instead of raw source so the build-time version inject is present.

Example fix

// before
<BrowserStudio project={project} readOnly={false} />

// after
<BrowserStudio
  project={project}
  readOnly={false}
  remotionPackageSource={{
    type: 'release',
    baseUrl: 'https://esm.sh',
    version: '4.0.0',
  }}
/>
Defensive patterns

Strategy: validation

Validate before calling

import type {BrowserStudioRemotionPackageSource} from '@remotion/browser-studio';

const isReleaseSource = (
  source: BrowserStudioRemotionPackageSource | undefined,
): source is {type: 'release'; baseUrl: string; version: string} =>
  source?.type === 'release' && source.version.length > 0;

// Before enabling any package-install / element-install flow:
if (!isReleaseSource(remotionPackageSource)) {
  // versions then depend on the build-time inject; verify it exists in your build
  // before allowing installs, otherwise surface a config error to the user.
}

Type guard

const isReleaseSource = (
  source: BrowserStudioRemotionPackageSource | undefined,
): source is {type: 'release'; baseUrl: string; version: string} =>
  source?.type === 'release' && source.version.length > 0;

Try / catch

try {
  await operations.packageInstallation.installPackages({dependencies});
} catch (error) {
  if (error instanceof Error && error.message.includes('Remotion version is unavailable')) {
    // surface a host configuration error: fix remotionPackageSource or the build inject
  }
  throw error;
}

Prevention

When it happens

Trigger: Any operation that resolves dependencies (installPackages, addEffect whose import path maps to an @remotion/* package, element install flows) while remotionPackageSource is undefined or {type: 'workspace'} AND the injected dependency-version record has no 'remotion' entry.

Common situations: Self-hosting @remotion/browser-studio from source with a custom bundler that skips the __BROWSER_STUDIO_DEPENDENCY_VERSIONS__ define/inject step; using a workspace (dev) remotionPackageSource in an embed built without the version inject; stale custom build config after upgrading the package.

Related errors


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