How to handle a fetchPriority error?

[Leon910]

Hi everyone, I worked on a user story involving next.js Images. Everything works as intended but I am still encountering the following errors in the browser console though:

1. Image with src "/Welcome-Emojis.svg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
   Read more: https://nextjs.org/docs/api-reference/next/image#priority

and

2. 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.

For the first error I already add priority={true} inside the index.js - line 88 to prevent the error. But the second error still remains.

I also do not have an fetchPriority-prop anywhere in the code. When removing the priority={true} the first error also appears back. I also tried with priority={false} but it didn´t work.

Does somebody have an idea where the error could comes from?

US - Image Slider

PR

[onemanwenttomow]

Short answer. This is probably due to the version of Next we are using. The warning is fairly harmless so you can safely ignore it for now. It makes sense to add the priority prop to any image above the fold (i.e. on the screen when the page first loads for the user).

Longer answer.

This is an issue that can occur when using priority on next/image in certain configurations or older versions of Next.js. Here’s what’s happening and how you might resolve it:

What’s Going On?

• When you add priority={true} to a <Image /> component from next/image, Next.js automatically adds a fetchPriority="high" attribute to the underlying img element to hint the browser that this image is important and should be fetched as soon as possible.
• The attribute fetchPriority is technically a newer HTML attribute (fetchpriority) that modern browsers recognise, but React expects all standard HTML attributes to be lowercase.
• If you're using a version of Next.js or React that doesn't handle this smoothly, you might see a warning like:
  - Warning: React does not recognise 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.

In short, React is complaining because fetchPriority should be fetchpriority in the actual DOM. You’re not manually adding fetchPriority—Next.js is doing it under the hood.

[Leon910]

Thanks a lot for your answer Peter! I already tried to install the newest version of react but it broke the app somehow so I switched back to 13.4.8.

What I find interesting is that even without the priority={true} line the error appears in the console. Might be due to the next.js-Image in general.

[onemanwenttomow]

I think the effort it will take to update nextjs is not worth it for this warning message.