remotion-dev/remotion · error · Error

Unknown fit: ${fit}

Error message

Unknown fit: ${fit}

What it means

Thrown by the internal `calcArgs` helper in @remotion/gif when the `fit` prop does not match any of the supported values 'contain', 'cover', or 'fill'. The switch statement's `default` branch fires, meaning an unexpected runtime value reached the canvas-sizing logic. TypeScript should normally prevent this because `GifFillMode` is a string-literal union, so hitting it implies the type system was bypassed.

Source

Thrown at packages/gif/src/canvas.tsx:86

				canvasSize.height / frameSize.height,
			);
			const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
			const centerY = (canvasSize.height - frameSize.height * ratio) / 2;

			return [
				0,
				0,
				frameSize.width,
				frameSize.height,
				centerX,
				centerY,
				frameSize.width * ratio,
				frameSize.height * ratio,
			];
		}

		default:
			throw new Error('Unknown fit: ' + fit);
	}
};

const makeCanvas = () => {
	if (typeof document === 'undefined') {
		return null;
	}

	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');

	canvas.width = 0;
	canvas.height = 0;

	return ctx;
};

type Props = {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Only pass one of the literal strings 'contain', 'cover', or 'fill' to `fit`.
2. Tighten the type of any variable feeding `fit` to `GifFillMode` so the compiler rejects bad values at the call site.
3. If the value comes from external input, validate/sanitize it against the allowed set before passing it to <Gif>.

Example fix

// before
const fit: string = req.query.fit;
<Gif src={src} fit={fit} />

// after
import type {GifFillMode} from '@remotion/gif';
const fits: GifFillMode[] = ['contain', 'cover', 'fill'];
const fit = fits.includes(req.query.fit) ? req.query.fit : 'contain';
<Gif src={src} fit={fit} />

import type {GifFillMode} from '@remotion/gif';

const FITS: readonly GifFillMode[] = ['contain', 'cover', 'fill'];
function normalizeFit(value: unknown): GifFillMode {
  return FITS.includes(value as GifFillMode) ? (value as GifFillMode) : 'contain';
}

import type {GifFillMode} from '@remotion/gif';

function isGifFillMode(value: unknown): value is GifFillMode {
  return value === 'contain' || value === 'cover' || value === 'fill';
}

When it happens

Trigger: Passing `fit="contain "` (a typo with trailing space), `fit="stretch"`, or a variable typed as `string`/cast with `as any` whose value is outside the union. Also reachable if a future value is added to the prop type but `calcArgs` is not updated.

Common situations: Storing the fit value in a config file or URL parameter typed loosely as `string` and passing it straight through; copying a value from CSS `object-fit` (which allows 'none'/'scale-down') that has no GIF equivalent; refactoring that widened the prop type.

Related errors

• The layout prop of <Sequence /> expects either "absolute-fil
• You passed to the "trimBefore" prop of your <Sequence> an ar
• The `<Html5Audio>` tag requires a string for `src`, but got
• The `<Html5Video>` tag requires a string for `src`, but got
• "seed" must be a finite number, but got ${JSON.stringify(see

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