remotion-dev/remotion · error · Error

OPFS is not available in this browser

Error message

OPFS is not available in this browser

What it means

Browser Studio stores project public files in the Origin Private File System (OPFS). getProjectDirectory() calls getProjectsDirectory(), which returns null when navigator.storage.getDirectory is absent, and translates that null into this error. OPFS requires a modern browser (Chromium 102+, Safari 15.2+, Firefox 111+) and a secure context (HTTPS or localhost); note createBrowserStudioProjectStorage() itself returns null instead of throwing, so this error means a code path reached OPFS without that pre-check.

Source

Thrown at packages/browser-studio/src/opfs-public-files.ts:54

	const browserStudioDirectory = await root.getDirectoryHandle(
		browserStudioDirectoryName,
		{create},
	);
	return browserStudioDirectory.getDirectoryHandle(projectsDirectoryName, {
		create,
	});
};

const getProjectDirectory = async ({
	create,
	storage,
}: {
	create: boolean;
	storage: BrowserStudioProjectStorage;
}) => {
	const projectsDirectory = await getProjectsDirectory({create});
	if (projectsDirectory === null) {
		throw new Error('OPFS is not available in this browser');
	}

	return projectsDirectory.getDirectoryHandle(storage.directoryName, {create});
};

const releaseBrowserStudioProjectStorageLease = async (
	storage: BrowserStudioProjectStorage,
) => {
	const lease = projectStorageLeases.get(storage.directoryName);
	if (!lease) {
		return;
	}

	projectStorageLeases.delete(storage.directoryName);
	lease.release();
	await lease.finished;
};

View on GitHub (pinned to 10db9de073)

Solutions

1. Use a browser with OPFS support: Chrome/Edge 102+, Safari 15.2+, Firefox 111+
2. Serve the page over HTTPS or localhost - OPFS requires a secure context
3. Update the embedded WebView/browser engine if Browser Studio runs inside one

Example fix

// before: calling OPFS-dependent APIs blindly
const storage = await createBrowserStudioProjectStorage(); // returns null when unsupported
// later: getProjectDirectory() throws 'OPFS is not available in this browser'

// after: feature-detect first and fail with guidance
if (typeof navigator?.storage?.getDirectory !== 'function') {
  throw new Error('Browser Studio requires OPFS - use Chrome 102+, Safari 15.2+, or Firefox 111+ over HTTPS');
}

const isOpfsAvailable = (): boolean =>
  typeof navigator !== 'undefined' &&
  typeof (navigator.storage as {getDirectory?: unknown} | undefined)?.getDirectory === 'function';

try {
  await writeBrowserStudioStoredPublicFile({contents, storage});
} catch (e) {
  if (/OPFS is not available/.test(String((e as Error).message))) {
    // fall back to in-memory public files or instruct the user to switch to an OPFS-capable browser
  } else throw e;
}

When it happens

Trigger: Running a code path that calls getProjectDirectory (via createBrowserStudioProjectStorage, collectBrowserStudioProjectStorageGarbage, or writeBrowserStudioStoredPublicFile) in a browser where navigator.storage.getDirectory is undefined - old browsers, non-secure contexts (plain http on a LAN IP), or restricted embedded WebViews.

Common situations: Opening Browser Studio in an outdated browser or WebView; serving the page over plain HTTP on a non-localhost host (secure context lost); enterprise browsers with storage APIs disabled.

Related errors

• Stored public file ${name} has no project storage
• The required HTML-in-canvas APIs are unavailable. Open chrom
• Could not create an HTML-in-canvas OffscreenCanvas 2D contex
• You have multiple buckets (${remotionBuckets .map((b) =>
• No supported configs

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