remotion-dev/remotion · error · Error

WebGPU is not available in this environment

Error message

WebGPU is not available in this environment

What it means

getGpuDevice() is the singleton accessor that lazily creates and caches a WebGPU GPUDevice for all webgpu effects. Its first step is to verify navigator.gpu exists; if WebGPU is unavailable (older browser, headless without WebGPU, Node/SSR), it rejects with this error. The cached promise means the same rejection surfaces for all subsequent callers within the session.

Source

Thrown at packages/core/src/effects/gpu-device.ts:20

//
// `navigator.gpu.requestAdapter()` and `adapter.requestDevice()` are async and
// non-trivially expensive (~10-100ms on first call). The device is cached
// globally so every webgpu effect / chain shares the same one.
//
// `GPUDevice` is intentionally typed as `unknown` here to avoid pulling
// `@webgpu/types` into core; effects targeting webgpu narrow the type
// themselves.

let devicePromise: Promise<unknown> | null = null;

export const getGpuDevice = (): Promise<unknown> => {
	if (devicePromise) {
		return devicePromise;
	}

	devicePromise = (async () => {
		if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
			throw new Error('WebGPU is not available in this environment');
		}

		const {gpu} = navigator as unknown as {
			gpu: {requestAdapter: () => Promise<unknown>};
		};
		const adapter = (await gpu.requestAdapter()) as {
			requestDevice: () => Promise<unknown>;
		} | null;
		if (!adapter) {
			throw new Error('No WebGPU adapter available');
		}

		return adapter.requestDevice();
	})();

	return devicePromise;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Run in a WebGPU-capable Chromium-based browser/runtime (enable WebGPU in headless via flags).
2. Replace or guard WebGPU effects with a webgl2 alternative when support is absent.
3. Feature-detect navigator.gpu before composing the scene and conditionally render the WebGPU effect.

Example fix

// before
const supportsWebGPU = true; // assumed

// after
const supportsWebGPU = typeof navigator !== 'undefined' && 'gpu' in navigator;
{supportsWebGPU ? <WebGPUEffect .../> : <WebGL2Effect .../>}

const supportsWebGPU =
  typeof navigator !== 'undefined' && 'gpu' in navigator;
if (!supportsWebGPU) {
  // skip WebGPU effects or use a fallback backend
}

const isWebGPUAvailable = (): boolean =>
  typeof navigator !== 'undefined' && 'gpu' in navigator;

try {
  const device = await getGpuDevice();
} catch (e) {
  if (String(e?.message).includes('WebGPU is not available')) {
    // fall back to a webgl2 effect
  } else throw e;
}

When it happens

Trigger: Mounting any WebGPU-based effect in an environment without navigator.gpu: non-Chromium browsers without WebGPU, headless Chrome without the WebGPU flag, server-side rendering, or older runtimes.

Common situations: Lambda/headless rendering of a composition that uses a WebGPU effect; running in Firefox/Safari without WebGPU enabled; SSR pre-render of a video component.

Related errors

• WebGPU is not available in this environment for canvas effec
• No WebGPU adapter available
• WebGL context was lost during canvas effect rendering. This
• Failed to create WebGL buffer
• Failed to create WebGL texture

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