remotion-dev/remotion · error · Error

Cannot resolve ${dependency.name} because the Browser Studio

Error message

Cannot resolve ${dependency.name} because the Browser Studio Remotion version is unavailable

What it means

createBrowserStudioOperations pins every @remotion/* dependency to dependencyVersions.remotion — the build-time injected version record passed in from <BrowserStudio>. If that record lacks a 'remotion' key, resolving any @remotion/* package throws with the package name in the message. Unlike the component-level resolver, this path does not consult remotionPackageSource.

Source

Thrown at packages/browser-studio/src/browser-studio-operations.ts:819

					});
				}
			}
		}
	};

	const resolveElementDependencies = async (
		dependencies: readonly {name: string; version: string | null}[],
	) => {
		const resolved =
			resolveDependencies !== null
				? await resolveDependencies(dependencies)
				: {};
		const remotionVersion = dependencyVersions.remotion;

		for (const dependency of dependencies) {
			if (dependency.name.startsWith('@remotion/')) {
				if (!remotionVersion) {
					throw new Error(
						`Cannot resolve ${dependency.name} because the Browser Studio Remotion version is unavailable`,
					);
				}

				resolved[dependency.name] = remotionVersion;
				continue;
			}

			if (dependency.version === null) {
				throw new Error(`Could not resolve ${dependency.name}`);
			}

			resolved[dependency.name] ??= dependency.version;
		}

		return resolved;
	};

View on GitHub (pinned to b2f4e34732)

Solutions

Use the official published build of @remotion/browser-studio, where dependency versions are injected at build time.
Regenerate the inject with dev/get-dependency-versions-for-build.ts and make sure your bundler defines __BROWSER_STUDIO_DEPENDENCY_VERSIONS__ with a 'remotion' entry.
Audit any custom bundling/aliasing step that could replace the injected global with an empty record.

Defensive patterns

Strategy: validation

Validate before calling

// The versions come from the build-time inject; verify at startup in dev builds:
declare const __BROWSER_STUDIO_DEPENDENCY_VERSIONS__:
  | Record<string, string>
  | undefined;

const remotionVersionAvailable =
  typeof __BROWSER_STUDIO_DEPENDENCY_VERSIONS__ !== 'undefined' &&
  typeof __BROWSER_STUDIO_DEPENDENCY_VERSIONS__.remotion === 'string';

if (!remotionVersionAvailable) {
  // disable install flows; the bundle is missing the version inject
}

Try / catch

try {
  await operations.effect.addEffect(request);
} catch (error) {
  if (
    error instanceof Error &&
    error.message.includes('Browser Studio Remotion version is unavailable')
  ) {
    // host build defect: rebuild @remotion/browser-studio with the version inject
  }
}

Prevention

Use official published builds of @remotion/browser-studio.
In custom builds, run the dependency-versions test (test/dependency-versions.test.ts) as a CI gate.
Smoke-test one @remotion/* install in staging before shipping.

When it happens

Trigger: addEffect / pasteEffects / installPackages / element install that pulls in an @remotion/* package while the __BROWSER_STUDIO_DEPENDENCY_VERSIONS__ inject has no 'remotion' entry — typically a custom or mis-built bundle of @remotion/browser-studio.

Common situations: Rebuilding @remotion/browser-studio with a modified pipeline that drops the version inject; using a dev/workspace build where dependency versions were never generated; tree-shaking or rewriting that removes the injected global.

Related errors

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