From a4f5463eb55482dcb28f8469671a0a7c03fabf72 Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 18 Feb 2022 17:02:03 -0500 Subject: [PATCH] Improve `next/image` warnings to avoid printing more than once (#34562) Currently, we print warnings during `next dev` for every render of `next/image`, which can quickly fill the console making it really unfriendly to developers trying to read the logs. This PR changes the behavior so that each unique warning prints at most once. - Related to #33007 - Related to #31340 --- packages/next/client/image.tsx | 29 ++++++++++++------ .../default/pages/warning-once.js | 23 ++++++++++++++ .../default/test/index.test.js | 30 +++++++++++++++++++ 3 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 test/integration/image-component/default/pages/warning-once.js diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index c16b26a056785f9..0c11ea607eb8822 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -23,6 +23,17 @@ if (typeof window === 'undefined') { ;(global as any).__NEXT_IMAGE_IMPORTED = true } +let warnOnce = (_: string) => {} +if (process.env.NODE_ENV !== 'production') { + const warnings = new Set() + warnOnce = (msg: string) => { + if (!warnings.has(msg)) { + console.warn(msg) + } + warnings.add(msg) + } +} + const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const type LoadingValue = typeof VALID_LOADING_VALUES[number] type ImageConfig = ImageConfigComplete & { allSizes: number[] } @@ -274,7 +285,7 @@ function handleLoading( if (!parent.position) { // The parent has not been rendered to the dom yet and therefore it has no position. Skip the warnings for such cases. } else if (layout === 'responsive' && parent.display === 'flex') { - console.warn( + warnOnce( `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.` ) } else if ( @@ -283,7 +294,7 @@ function handleLoading( parent.position !== 'fixed' && parent.position !== 'absolute' ) { - console.warn( + warnOnce( `Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.` ) } @@ -410,7 +421,7 @@ export default function Image({ ) } if (layout === 'fill' && (width || height)) { - console.warn( + warnOnce( `Image with src "${src}" and "layout='fill'" has unused properties assigned. Please remove "width" and "height".` ) } @@ -427,13 +438,13 @@ export default function Image({ ) } if (sizes && layout !== 'fill' && layout !== 'responsive') { - console.warn( + warnOnce( `Image with src "${src}" has "sizes" property but it will be ignored. Only use "sizes" with "layout='fill'" or "layout='responsive'".` ) } if (placeholder === 'blur') { if (layout !== 'fill' && (widthInt || 0) * (heightInt || 0) < 1600) { - console.warn( + warnOnce( `Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.` ) } @@ -453,12 +464,12 @@ export default function Image({ } } if ('ref' in rest) { - console.warn( + warnOnce( `Image with src "${src}" is using unsupported "ref" property. Consider using the "onLoadingComplete" property instead.` ) } if ('style' in rest) { - console.warn( + warnOnce( `Image with src "${src}" is using unsupported "style" property. Please use the "className" property instead.` ) } @@ -475,7 +486,7 @@ export default function Image({ url = new URL(urlStr) } catch (err) {} if (urlStr === src || (url && url.pathname === src && !url.search)) { - console.warn( + warnOnce( `Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` + `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width` ) @@ -500,7 +511,7 @@ export default function Image({ !lcpImage.src.startsWith('blob:') ) { // https://web.dev/lcp/#measure-lcp-in-javascript - console.warn( + warnOnce( `Image with src "${lcpImage.src}" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.` + `\nRead more: https://nextjs.org/docs/api-reference/next/image#priority` ) diff --git a/test/integration/image-component/default/pages/warning-once.js b/test/integration/image-component/default/pages/warning-once.js new file mode 100644 index 000000000000000..ed1c47b077d9bd1 --- /dev/null +++ b/test/integration/image-component/default/pages/warning-once.js @@ -0,0 +1,23 @@ +import React from 'react' +import Image from 'next/image' + +const Page = () => { + const [count, setCount] = React.useState(0) + return ( + <> +

Warning should print at most once

+ + + + + ) +} + +export default Page diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js index 2821fe553d6c00e..96d1041b6b596cf 100644 --- a/test/integration/image-component/default/test/index.test.js +++ b/test/integration/image-component/default/test/index.test.js @@ -812,6 +812,36 @@ function runTests(mode) { await browser.elementById('without-loader').getAttribute('srcset') ).toBe('/test.svg 1x, /test.svg 2x') }) + + it('should warn at most once even after state change', async () => { + const browser = await webdriver(appPort, '/warning-once') + await browser.eval(`document.querySelector("footer").scrollIntoView()`) + await browser.eval(`document.querySelector("button").click()`) + await browser.eval(`document.querySelector("button").click()`) + const count = await browser.eval( + `document.querySelector("button").textContent` + ) + expect(count).toBe('Count: 2') + await check(async () => { + const result = await browser.eval( + 'document.getElementById("w").naturalWidth' + ) + if (result < 1) { + throw new Error('Image not loaded') + } + return 'done' + }, 'done') + const warnings = (await browser.log('browser')) + .map((log) => log.message) + .filter((log) => log.startsWith('Image with src')) + expect(warnings[0]).toMatch( + 'Image with src "/test.png" has "sizes" property but it will be ignored.' + ) + expect(warnings[1]).toMatch( + 'Image with src "/test.png" was detected as the Largest Contentful Paint (LCP).' + ) + expect(warnings.length).toBe(2) + }) } else { //server-only tests it('should not create an image folder in server/chunks', async () => {