Warning: React does not recognize the `fetchPriority` prop on a DOM element

[jlarmstrongiv]

Describe the bug

Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at img
    at Image2 (file:///Users/user/Desktop/projects/project/node_modules/@unpic/react/dist/chunk-W7EQS7E7.mjs:30:42)

To Reproduce

        <UnpicReactImage
          priority
          layout="constrained"
          width={1023}
          height={682}
          src="/static/assets/images/owl.jpg"
          alt="Owl"
          cdn="astro"
        />

Expected behavior
No warnings logged to the console

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 0.0.23

I suppose the solution is using fetchpriority instead of fetchPriority for now

[jlarmstrongiv]

It looks like a fix was merged, but never released facebook/react#25927

It would have to be a manual patch in https://github.com/ascorbic/unpic-img/blob/main/packages/react/src/image.tsx

[acoderacom]

@jlarmstrongiv can you please guide me how to manually patch the image.tsx

[jlarmstrongiv]

@acoderacom something like

    const { fetchPriority, ...camelizedProps } = camelizeProps(transformProps(props));
    return <img fetchpriority={fetchPriority} {...camelizedProps} ref={ref} />;

Though, it will depend on whether the fetchPriority is always set or whether you need to set a default value. You may need to finesse the TypeScript types too, depending on the project settings.