remotion-dev/remotion · error · Error

The ${formatPropList(conflictingProps)} prop${conflictingPro

Error message

The ${formatPropList(conflictingProps)} prop${conflictingProps.length === 1 ? '' : 's'} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${conflictingProps.length === 1 ? 'this prop' : 'these props'}.

What it means

Thrown by validateCanvasImageFallbackProps when <Img> is used with `effects` and the remaining props include any of the canvas-incompatible native <img> attributes (the imgCanvasFallbackIncompatibleProps set, e.g. srcSet, sizes, useMap, loading, decoding, referrerPolicy, etc.) or a `ref`. With effects, <Img> renders a <canvas> instead of a native <img>, so those DOM attributes have no effect and would silently be ignored. The error names the offending props so you can remove them.

Source

Thrown at packages/core/src/Img.tsx:510

	readonly width: ImgProps['width'];
	readonly height: ImgProps['height'];
}) => {
	if (typeof width === 'string' || typeof height === 'string') {
		throw new Error(
			'The "width" and "height" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>. Use numeric props or CSS dimensions in "style".',
		);
	}

	const conflictingProps = getIncompatiblePropNames(props);
	if (ref !== null && ref !== undefined) {
		conflictingProps.unshift('ref');
	}

	if (conflictingProps.length === 0) {
		return;
	}

	throw new Error(
		`The ${formatPropList(conflictingProps)} prop${
			conflictingProps.length === 1 ? '' : 's'
		} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${
			conflictingProps.length === 1 ? 'this prop' : 'these props'
		}.`,
	);
};

const getFitFromObjectFit = (
	style: React.CSSProperties | undefined,
): ImageFit | undefined => {
	const objectFit = style?.objectFit;

	if (
		objectFit === 'fill' ||
		objectFit === 'contain' ||
		objectFit === 'cover'
	) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Remove the listed conflicting props (the message reports them via formatPropList).
2. Drop the `ref` when using effects with <Img>, or restructure to access the canvas another way.
3. If you need responsive sources or lazy loading, drop `effects` so <Img> renders a native <img>.
4. Audit wrapper components that spread `{...rest}` onto <Img> and filter out incompatible keys when effects are present.

Example fix

// before
<Img src={url} srcSet={`${url} 2x`} ref={imgRef} effects={[blur]} />
// after
<Img src={url} effects={[blur]} />

const incompatible = Object.keys(props).filter((k) =>
  imgCanvasFallbackIncompatibleProps.has(k),
);
if (effects.length > 0 && incompatible.length > 0) {
  throw new Error(`These props conflict with effects: ${incompatible.join(', ')}`);
}

const isCanvasCompatible = (
  props: Record<string, unknown>,
  blocklist: ReadonlySet<string>,
): boolean =>
  Object.keys(props).every((k) => !blocklist.has(k));

When it happens

Trigger: Passing `effects` plus `ref`, `srcSet`, `sizes`, `useMap`, `loading`, `decoding`, or other native <img> attributes; spreading a generic object of img attributes onto <Img> alongside effects.

Common situations: Reusing a responsive image component (with srcSet/sizes) and adding effects to it; forwarding refs to the underlying element when effects force a canvas render; converting an existing <img> usage to Remotion <Img> while keeping legacy attributes.

Related errors

• The "width" and "height" props must be numbers on <Img> when
• No "src" prop was passed to <Img>.
• <Solid>: `pixelDensity` must be a positive finite number. Re
• Emoji ${emoji} not found. Available emojis: ${emojis.map((e)
• No id for composition passed.

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