Improve error message on next/future/image when objectFit or `obj…

…ectPosition` (#39614)

Improve PR improves the error message on `next/future/image` when `objectFit` or `objectPosition` is provided and suggests using `style` instead. It also prints the stack trace so its clear where the error came from.

packages/next/client/future/image.tsx

@@ -359,19 +359,40 @@ const ImageElement = ({
         style={{ ...imgStyle, ...blurStyle }}
         ref={useCallback(
           (img: ImgElementWithDataProp | null) => {
-            if (img && onError) {
+            if (!img) {
+              return
+            }
+            if (onError) {
               // If the image has an error before react hydrates, then the error is lost.
               // The workaround is to wait until the image is mounted which is after hydration,
               // then we set the src again to trigger the error handler (if there was an error).
               // eslint-disable-next-line no-self-assign
               img.src = img.src
             }
             if (process.env.NODE_ENV !== 'production') {
-              if (img && !srcString) {
+              if (!srcString) {
                 console.error(`Image is missing required "src" property:`, img)
               }
+              if (
+                img.getAttribute('objectFit') ||
+                img.getAttribute('objectfit')
+              ) {
+                console.error(
+                  `Image has unknown prop "objectFit". Did you mean to use the "style" prop instead?`,
+                  img
+                )
+              }
+              if (
+                img.getAttribute('objectPosition') ||
+                img.getAttribute('objectposition')
+              ) {
+                console.error(
+                  `Image has unknown prop "objectPosition". Did you mean to use the "style" prop instead?`,
+                  img
+                )
+              }
             }
-            if (img?.complete) {
+            if (img.complete) {
               handleLoading(
                 img,
                 srcString,
@@ -666,17 +687,6 @@ export default function Image({
       )
     }
 
-    if ('objectFit' in rest) {
-      throw new Error(
-        `Image with src "${src}" has unknown prop "objectFit". This style should be specified using the "style" property.`
-      )
-    }
-    if ('objectPosition' in rest) {
-      throw new Error(
-        `Image with src "${src}" has unknown prop "objectPosition". This style should be specified using the "style" property.`
-      )
-    }
-
     if (placeholder === 'blur') {
       if ((widthInt || 0) * (heightInt || 0) < 1600) {
         warnOnce(

test/integration/image-future/default/pages/invalid-objectfit.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Image from 'next/future/image'
+
+const Page = () => {
+  return (
+    <div>
+      <Image
+        src="/test.jpg"
+        width="400"
+        height="400"
+        objectFit="contain"
+        objectPosition="20% 20%"
+      />
+    </div>
+  )
+}
+
+export default Page

test/integration/image-future/default/test/index.test.ts

@@ -858,6 +858,20 @@ function runTests(mode) {
       )
       expect(warnings.length).toBe(1)
     })
+
+    it('should show console error for objectFit and objectPosition', async () => {
+      const browser = await webdriver(appPort, '/invalid-objectfit')
+
+      expect(await hasRedbox(browser)).toBe(false)
+
+      await check(async () => {
+        return (await browser.log()).map((log) => log.message).join('\n')
+      }, /Image has unknown prop "objectFit"/gm)
+
+      await check(async () => {
+        return (await browser.log()).map((log) => log.message).join('\n')
+      }, /Image has unknown prop "objectPosition"/gm)
+    })
   } else {
     //server-only tests
     it('should not create an image folder in server/chunks', async () => {