fix: handle different cases of React fetchPriority (#47302)

In React 18.3.0 or newer, we must user camelCase `fetchPriority` prop to avoid "Warning: Invalid DOM property".

In React 18.2.0 and older, we must use the lowercase `fetchpriority` prop to avoid "Warning: Invalid DOM property".

See facebook/react#25927

packages/next/src/client/image.tsx

@@ -8,6 +8,7 @@ import React, {
  useMemo,
  useState,
  forwardRef,
+ version,
 } from 'react'
 import Head from '../shared/lib/head'
 import { getImageBlurSvg } from '../shared/lib/image-blur-svg'
@@ -367,6 +368,23 @@ function handleLoading(
  })
 }
 
+function getDynamicProps(
+ fetchPriority?: string
+): Record<string, string | undefined> {
+ const [majorStr, minorStr] = version.split('.')
+ const major = parseInt(majorStr, 10)
+ const minor = parseInt(minorStr, 10)
+ if (major > 18 || (major === 18 && minor >= 3)) {
+ // In React 18.3.0 or newer, we must use camelCase
+ // prop to avoid "Warning: Invalid DOM property".
+ // See https://github.com/facebook/react/pull/25927
+ return { fetchPriority }
+ }
+ // In React 18.2.0 or older, we must use lowercase prop
+ // to avoid "Warning: Invalid DOM property".
+ return { fetchpriority: fetchPriority }
+}
+
 const ImageElement = forwardRef<HTMLImageElement | null, ImageElementProps>(
  (
  {
@@ -401,10 +419,9 @@ const ImageElement = forwardRef<HTMLImageElement | null, ImageElementProps>(
  <>
  <img
  {...rest}
+ {...getDynamicProps(fetchPriority)}
  // @ts-expect-error - TODO: upgrade to `@types/react@18`
  loading={loading}
- // Keep lowercase until https://github.com/facebook/react/pull/25927 lands
- fetchpriority={fetchPriority}
  width={widthInt}
  height={heightInt}
  decoding="async"
@@ -959,8 +976,7 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
  imageSrcSet={imgAttributes.srcSet}
  imageSizes={imgAttributes.sizes}
  crossOrigin={rest.crossOrigin}
- // Keep lowercase until https://github.com/facebook/react/pull/25927 lands
- fetchpriority={fetchPriority}
+ {...getDynamicProps(fetchPriority)}
  />
  </Head>
  ) : null}

test/integration/next-image-new/default/pages/priority.js

@@ -8,13 +8,15 @@ const Page = () => {
  <Image
  priority
  id="basic-image"
+ alt="basic-image"
  src="/test.jpg"
  width="400"
  height="400"
  ></Image>
  <Image
  priority
  id="basic-image-crossorigin"
+ alt="basic-image-crossorigin"
  src="/test.jpg"
  width="400"
  height="400"
@@ -23,13 +25,15 @@ const Page = () => {
  <Image
  loading="eager"
  id="load-eager"
+ alt="load-eager"
  src="/test.png"
  width="400"
  height="400"
  ></Image>
  <Image
  priority
  id="responsive1"
+ alt="responsive1"
  src="/wide.png"
  width="1200"
  height="700"
@@ -38,13 +42,15 @@ const Page = () => {
  <Image
  priority
  id="responsive2"
+ alt="responsive2"
  src="/wide.png"
  width="1200"
  height="700"
  sizes="100vw"
  />
  <Image
  id="pri-low"
+ alt="pri-low"
  src="/test.webp"
  width="100"
  height="100"

test/integration/next-image-new/default/test/index.test.ts

@@ -183,6 +183,7 @@ function runTests(mode) {
  expect(warnings).not.toMatch(
  /was detected as the Largest Contentful Paint/gm
  )
+ expect(warnings).not.toMatch(/React does not recognize the (.+) prop/gm)
 
  // should preload with crossorigin
  expect(