remotion-dev/remotion · error · Error

The prop cannot be used on when effects are passed, because…

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.

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
• No effect prop edits to save
• No "src" prop was passed to
• : `pixelDensity` must be a positive finite number…
• animationData should be provided as an object. If you only…

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

Appendix: source

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

	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 46a3a6bf13)