From 2b75dccd028a89d5a1cf45c92024aafe3db17b5a Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 15 Aug 2022 15:25:49 +0100 Subject: [PATCH 1/3] Add stack trace to `objectFit` error --- packages/next/client/future/image.tsx | 29 ++++++++++++------- .../default/pages/invalid-objectfit.js | 18 ++++++++++++ .../image-future/default/test/index.test.js | 18 ++++++++++++ 3 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 test/integration/image-future/default/pages/invalid-objectfit.js diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index c305631d01477d4..8c7df9ebd38eab5 100644 --- a/packages/next/client/future/image.tsx +++ b/packages/next/client/future/image.tsx @@ -363,6 +363,24 @@ const ImageElement = ({ if (img && !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) { handleLoading( @@ -586,17 +604,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( diff --git a/test/integration/image-future/default/pages/invalid-objectfit.js b/test/integration/image-future/default/pages/invalid-objectfit.js new file mode 100644 index 000000000000000..5164a61b7ade74f --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default Page diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js index 95570ddbd14c6bb..d050c1e3226fdee 100644 --- a/test/integration/image-future/default/test/index.test.js +++ b/test/integration/image-future/default/test/index.test.js @@ -852,6 +852,24 @@ 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('browser')) + .map((log) => log.message) + .join('\n') + }, /Image has unknown prop "objectFit"/gm) + + await check(async () => { + return (await browser.log('browser')) + .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 () => { From bfff243aaed3e29856b6153adec4a9e46c90beab Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 16 Aug 2022 18:14:58 +0100 Subject: [PATCH 2/3] Fix bug where img is null --- packages/next/client/future/image.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index 723dd484a0f37c3..6dcf5fde30b4858 100644 --- a/packages/next/client/future/image.tsx +++ b/packages/next/client/future/image.tsx @@ -358,9 +358,12 @@ const ImageElement = ({ loading={loading} style={{ ...imgStyle, ...blurStyle }} ref={useCallback( - (img: ImgElementWithDataProp) => { + (img: ImgElementWithDataProp | null) => { + if (!img) { + return + } if (process.env.NODE_ENV !== 'production') { - if (img && !srcString) { + if (!srcString) { console.error(`Image is missing required "src" property:`, img) } if ( @@ -382,7 +385,7 @@ const ImageElement = ({ ) } } - if (img?.complete) { + if (img.complete) { handleLoading( img, srcString, From b114b59f46349ff5d6792ad7b965a5d4e4482e7a Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 22 Aug 2022 18:18:22 -0400 Subject: [PATCH 3/3] Fix lint --- test/integration/image-future/default/test/index.test.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/test/integration/image-future/default/test/index.test.ts b/test/integration/image-future/default/test/index.test.ts index 0955f71c61c13ea..0b779d5fa4d8ce0 100644 --- a/test/integration/image-future/default/test/index.test.ts +++ b/test/integration/image-future/default/test/index.test.ts @@ -865,15 +865,11 @@ function runTests(mode) { expect(await hasRedbox(browser)).toBe(false) await check(async () => { - return (await browser.log('browser')) - .map((log) => log.message) - .join('\n') + return (await browser.log()).map((log) => log.message).join('\n') }, /Image has unknown prop "objectFit"/gm) await check(async () => { - return (await browser.log('browser')) - .map((log) => log.message) - .join('\n') + return (await browser.log()).map((log) => log.message).join('\n') }, /Image has unknown prop "objectPosition"/gm) }) } else {