From 8ed430d09808f40afaf73750f7545d895352c045 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Sun, 19 Mar 2023 17:16:12 -0400
Subject: [PATCH 1/2] fix: handle different cases of React `fetchPriority`

---
 packages/next/src/client/image.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/next/src/client/image.tsx b/packages/next/src/client/image.tsx
index d830fef14ec50c..5e13f317f34ae5 100644
--- a/packages/next/src/client/image.tsx
+++ b/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}

From 6296b99b3b4ac3b537a0d9996f2dbd6d6df2c2d7 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Sun, 19 Mar 2023 19:36:58 -0400
Subject: [PATCH 2/2] chore: add test

---
 test/integration/next-image-new/default/pages/priority.js  | 6 ++++++
 test/integration/next-image-new/default/test/index.test.ts | 1 +
 2 files changed, 7 insertions(+)

diff --git a/test/integration/next-image-new/default/pages/priority.js b/test/integration/next-image-new/default/pages/priority.js
index 3cc02b89bcbfcd..57f025fe815a13 100644
--- a/test/integration/next-image-new/default/pages/priority.js
+++ b/test/integration/next-image-new/default/pages/priority.js
@@ -8,6 +8,7 @@ const Page = () => {
       <Image
         priority
         id="basic-image"
+        alt="basic-image"
         src="/test.jpg"
         width="400"
         height="400"
@@ -15,6 +16,7 @@ const Page = () => {
       <Image
         priority
         id="basic-image-crossorigin"
+        alt="basic-image-crossorigin"
         src="/test.jpg"
         width="400"
         height="400"
@@ -23,6 +25,7 @@ const Page = () => {
       <Image
         loading="eager"
         id="load-eager"
+        alt="load-eager"
         src="/test.png"
         width="400"
         height="400"
@@ -30,6 +33,7 @@ const Page = () => {
       <Image
         priority
         id="responsive1"
+        alt="responsive1"
         src="/wide.png"
         width="1200"
         height="700"
@@ -38,6 +42,7 @@ const Page = () => {
       <Image
         priority
         id="responsive2"
+        alt="responsive2"
         src="/wide.png"
         width="1200"
         height="700"
@@ -45,6 +50,7 @@ const Page = () => {
       />
       <Image
         id="pri-low"
+        alt="pri-low"
         src="/test.webp"
         width="100"
         height="100"
diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
index 3b42328304ecdf..a75d0949fc0685 100644
--- a/test/integration/next-image-new/default/test/index.test.ts
+++ b/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(