{"record":{"id":"9f49e0b2b05d247b","repo":"remotion-dev/remotion","slug":"the-formatproplist-conflictingprops-prop-conf","errorCode":null,"errorMessage":"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'}.","messagePattern":"The (.+?) prop(.+?) cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>\\. Remove (.+?)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/Img.tsx","lineNumber":510,"sourceCode":"\treadonly width: ImgProps['width'];\n\treadonly height: ImgProps['height'];\n}) => {\n\tif (typeof width === 'string' || typeof height === 'string') {\n\t\tthrow new Error(\n\t\t\t'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\".',\n\t\t);\n\t}\n\n\tconst conflictingProps = getIncompatiblePropNames(props);\n\tif (ref !== null && ref !== undefined) {\n\t\tconflictingProps.unshift('ref');\n\t}\n\n\tif (conflictingProps.length === 0) {\n\t\treturn;\n\t}\n\n\tthrow new Error(\n\t\t`The ${formatPropList(conflictingProps)} prop${\n\t\t\tconflictingProps.length === 1 ? '' : 's'\n\t\t} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${\n\t\t\tconflictingProps.length === 1 ? 'this prop' : 'these props'\n\t\t}.`,\n\t);\n};\n\nconst getFitFromObjectFit = (\n\tstyle: React.CSSProperties | undefined,\n): ImageFit | undefined => {\n\tconst objectFit = style?.objectFit;\n\n\tif (\n\t\tobjectFit === 'fill' ||\n\t\tobjectFit === 'contain' ||\n\t\tobjectFit === 'cover'\n\t) {","sourceCodeStart":492,"sourceCodeEnd":528,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/Img.tsx#L492-L528","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Remove the listed conflicting props (the message reports them via formatPropList).","Drop the `ref` when using effects with <Img>, or restructure to access the canvas another way.","If you need responsive sources or lazy loading, drop `effects` so <Img> renders a native <img>.","Audit wrapper components that spread `{...rest}` onto <Img> and filter out incompatible keys when effects are present."],"exampleFix":"// before\n<Img src={url} srcSet={`${url} 2x`} ref={imgRef} effects={[blur]} />\n// after\n<Img src={url} effects={[blur]} />","handlingStrategy":"validation","validationCode":"const incompatible = Object.keys(props).filter((k) =>\n  imgCanvasFallbackIncompatibleProps.has(k),\n);\nif (effects.length > 0 && incompatible.length > 0) {\n  throw new Error(`These props conflict with effects: ${incompatible.join(', ')}`);\n}","typeGuard":"const isCanvasCompatible = (\n  props: Record<string, unknown>,\n  blocklist: ReadonlySet<string>,\n): boolean =>\n  Object.keys(props).every((k) => !blocklist.has(k));","tryCatchPattern":null,"preventionTips":["Avoid spreading generic <img> attributes onto <Img> when using effects.","Drop `ref` and `srcSet`/`sizes`/`useMap`/`loading`/`decoding` on effects-enabled <Img>.","Filter props at the wrapper boundary before forwarding.","Document that effects swap the underlying element to <canvas>."],"tags":["img","canvas-image","effects","props","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-13T19:17:28.613Z"}