remotion-dev/remotion · critical · Error

Failed to render GIF with source ${src}: "${error.message}".

Error message

Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.

What it means

The render-time counterpart of the Studio CORS error, thrown by GifForRendering during a server-side Remotion render (e.g. `npx remotion render`). When the headless Chrome used for rendering cannot fetch the GIF because of CORS, the render aborts. The component logs the stack via `Internals.Log` at the configured log level and then throws.

Source

Thrown at packages/gif/src/GifForRendering.tsx:151

				}

				continueRender(newHandle);
				continueRender(renderHandle);
			};
		}, [
			renderHandle,
			logLevel,
			cacheKey,
			resolvedSrc,
			delayRender,
			continueRender,
			delayRenderTimeoutInMilliseconds,
		]);

		if (error) {
			Internals.Log.error({logLevel, tag: null}, error.stack);
			if (isCorsError(error)) {
				throw new Error(
					`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.`,
				);
			}

			throw new Error(
				`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`,
			);
		}

		if (index === -1) {
			return null;
		}

		return (
			<Canvas
				fit={fit}
				index={index}
				frames={state.frames}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Bundle the GIF with `staticFile()` so the render fetches it from the local bundle server (same origin).
Add CORS rules to the bucket/CDN allowing the render origin (or `*`).
For Remotion Lambda, ensure the S3 bucket serving assets has a CORS configuration that permits GET from the Lambda worker.
Render once with `--log=verbose` to capture the underlying fetch error from the headless browser.

Example fix

// before
<Gif src="https://prod-bucket.s3.amazonaws.com/anim.gif" />

// after
import anim from './anim.gif';
<Gif src={anim} />

Defensive patterns

Strategy: fallback

Validate before calling

// Bundle the GIF so renders never depend on remote CORS.
import {staticFile} from 'remotion';
const gifSrc = staticFile('anim.gif'); // safe for `remotion render`

Try / catch

// Renders run headless and cannot show a fallback UI, so prevent at build time:
// fail the render early if any GIF src is remote and unverified.
const remoteGifs = collectGifSrcs(composition).filter((u) => u.startsWith('http'));
if (remoteGifs.length) {
  throw new Error('Remote GIF srcs must enable CORS: ' + remoteGifs.join(', '));
}

Prevention

Never render against a remote GIF you have not confirmed sends CORS headers to the render worker.
For Remotion Lambda, put assets in an S3 bucket with a CORS policy allowing the worker, or bundle them.
Run a smoke render in CI to catch CORS failures before deploying.

When it happens

Trigger: Running `remotion render` on a composition containing `<Gif src="https://...">` where the remote host does not grant CORS access to the headless browser origin. Equivalent to error 1040 but in the rendering pipeline.

Common situations: Rendering works locally with `staticFile()` but breaks in production/Lambda because `src` was switched to a remote URL whose bucket lacks CORS rules; CORS headers are present for browser origins but not for the render worker's origin; using a signed URL that strips CORS headers.

Related errors

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