From 930668eeea3e7501067d3e21abcc7dfbd9333698 Mon Sep 17 00:00:00 2001 From: Lucas Wiener Date: Fri, 3 Dec 2021 07:40:45 +0100 Subject: [PATCH] Skip warnings for Image not rendered to the dom (#32049) Some libraries, like react-slick, render their content to a detached element before attaching it to the dom. If the content of such libraries is Image components, they will report warnings because the display/position properties are undefined. This PR squelch the warnings for such cases. --- packages/next/client/image.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 61ea616e50e80d..f3e64f28c25405 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -279,7 +279,9 @@ function handleLoading( if (process.env.NODE_ENV !== 'production') { if (img.parentElement?.parentElement) { const parent = getComputedStyle(img.parentElement.parentElement) - if (layout === 'responsive' && parent.display === 'flex') { + 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( `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.` )