fix(next/image): improve warning when `fill` and `sizes="100vw"` #61949

styfle · 2024-02-12T16:20:53Z

Previously, this error was confusing because it made it sound like the sizes prop was missing. This was because the default value of sizes is 100vw so the previous code couldn't tell the different between implicit vs explicit 100vw.

This PR changes the code to read the input value from the sizes prop and prints a better warning.

Fixes NEXT-2441

Fixes #58586

ijjk · 2024-02-12T16:25:23Z

Failing test suites

Commit: 96beaaf

TURBOPACK=1 pnpm test test/integration/cli/test/index.test.js (turbopack)

CLI Usage > dev > NODE_OPTIONS='--inspect'

Expand output

● CLI Usage › dev › NODE_OPTIONS='--inspect'

TIMED OUT: /Debugger listening on/

Starting inspector on 127.0.0.1:9229 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use


undefined

  636 |
  637 |   if (hardError) {
> 638 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  639 |   }
  640 |   return false
  641 | }

  at check (lib/next-test-utils.ts:638:11)
  at Object.<anonymous> (integration/cli/test/index.test.js:549:9)

Read more about building and testing Next.js in contributing.md.

ijjk · 2024-02-12T16:26:13Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
buildDuration	11.7s	11.8s	N/A
buildDurationCached	6.3s	4.9s	N/A
nodeModulesSize	196 MB	196 MB	⚠️ +2.51 kB
nextStartRea..uration (ms)	428ms	429ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
423.HASH.js gzip	185 B	181 B	N/A
68-HASH.js gzip	29.6 kB	29.6 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	238 B	239 B	N/A
main-HASH.js gzip	31.9 kB	31.9 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	46.9 kB	46.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	182 B	181 B	N/A
amp-HASH.js gzip	502 B	501 B	N/A
css-HASH.js gzip	320 B	322 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	256 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	368 B	369 B	N/A
image-HASH.js gzip	4.19 kB	4.2 kB	N/A
index-HASH.js gzip	257 B	256 B	N/A
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	310 B	311 B	N/A
script-HASH.js gzip	384 B	383 B	N/A
withRouter-HASH.js gzip	306 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	106 B	106 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
_buildManifest.js gzip	483 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
index.html gzip	528 B	527 B	N/A
link.html gzip	541 B	539 B	N/A
withRouter.html gzip	523 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
edge-ssr.js gzip	94.4 kB	94.4 kB	N/A
page.js gzip	150 kB	150 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
middleware-b..fest.js gzip	619 B	624 B	N/A
middleware-r..fest.js gzip	151 B	149 B	N/A
middleware.js gzip	47.4 kB	47.4 kB	N/A
edge-runtime..pack.js gzip	1.94 kB	1.94 kB	✓
Overall change	1.94 kB	1.94 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js styfle/next-2441-fix-warning-sizes-prop	Change
app-page-exp...dev.js gzip	166 kB	166 kB	✓
app-page-exp..prod.js gzip	95.4 kB	95.4 kB	✓
app-page-tur..prod.js gzip	97.2 kB	97.2 kB	✓
app-page-tur..prod.js gzip	91.6 kB	91.6 kB	✓
app-page.run...dev.js gzip	136 kB	136 kB	✓
app-page.run..prod.js gzip	90.2 kB	90.2 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.7 kB	14.7 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.7 kB	14.7 kB	✓
pages-api-tu..prod.js gzip	9.43 kB	9.43 kB	✓
pages-api.ru...dev.js gzip	9.7 kB	9.7 kB	✓
pages-api.ru..prod.js gzip	9.43 kB	9.43 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	49.9 kB	49.9 kB	✓
Overall change	924 kB	924 kB	✓

Diff details

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 1552: /***/ function (
+    /***/ 4070: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(2599);
+          return __webpack_require__(2369);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 9272: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3299: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8286)
+        __webpack_require__(4830)
       );
-      const _getimgprops = __webpack_require__(985);
-      const _imageconfig = __webpack_require__(8749);
-      const _imageconfigcontextsharedruntime = __webpack_require__(7829);
-      const _warnonce = __webpack_require__(3652);
-      const _routercontextsharedruntime = __webpack_require__(6120);
+      const _getimgprops = __webpack_require__(3301);
+      const _imageconfig = __webpack_require__(2958);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6869);
+      const _warnonce = __webpack_require__(2179);
+      const _routercontextsharedruntime = __webpack_require__(7554);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5732)
+        __webpack_require__(9687)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -69,7 +69,8 @@
         onLoadRef,
         onLoadingCompleteRef,
         setBlurComplete,
-        unoptimized
+        unoptimized,
+        sizesInput
       ) {
         const src = img == null ? void 0 : img.src;
         if (!img || img["data-loaded-src"] === src) {
@@ -165,6 +166,7 @@
             onLoadingCompleteRef,
             setBlurComplete,
             setShowAltText,
+            sizesInput,
             onLoad,
             onError,
             ...rest
@@ -219,7 +221,8 @@
                     onLoadRef,
                     onLoadingCompleteRef,
                     setBlurComplete,
-                    unoptimized
+                    unoptimized,
+                    sizesInput
                   );
                 }
               },
@@ -231,6 +234,7 @@
                 setBlurComplete,
                 onError,
                 unoptimized,
+                sizesInput,
                 forwardedRef,
               ]
             ),
@@ -242,7 +246,8 @@
                 onLoadRef,
                 onLoadingCompleteRef,
                 setBlurComplete,
-                unoptimized
+                unoptimized,
+                sizesInput
               );
             },
             onError: (event) => {
@@ -346,6 +351,7 @@
                 onLoadingCompleteRef: onLoadingCompleteRef,
                 setBlurComplete: setBlurComplete,
                 setShowAltText: setShowAltText,
+                sizesInput: props.sizes,
                 ref: forwardedRef,
               }),
               imgMeta.priority
@@ -373,7 +379,7 @@
       /***/
     },
 
-    /***/ 985: /***/ function (
+    /***/ 3301: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -389,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3652);
-      const _imageblursvg = __webpack_require__(1668);
-      const _imageconfig = __webpack_require__(8749);
+      const _warnonce = __webpack_require__(2179);
+      const _imageblursvg = __webpack_require__(892);
+      const _imageconfig = __webpack_require__(2958);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -760,7 +766,7 @@
       /***/
     },
 
-    /***/ 1668: /***/ function (__unused_webpack_module, exports) {
+    /***/ 892: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -815,7 +821,7 @@
       /***/
     },
 
-    /***/ 9582: /***/ function (
+    /***/ 3612: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -842,10 +848,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(2430);
-      const _getimgprops = __webpack_require__(985);
-      const _imagecomponent = __webpack_require__(9272);
+      const _getimgprops = __webpack_require__(3301);
+      const _imagecomponent = __webpack_require__(3299);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5732)
+        __webpack_require__(9687)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -877,7 +883,7 @@
       /***/
     },
 
-    /***/ 5732: /***/ function (__unused_webpack_module, exports) {
+    /***/ 9687: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -912,7 +918,7 @@
       /***/
     },
 
-    /***/ 2599: /***/ function (
+    /***/ 2369: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -933,8 +939,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -964,12 +970,12 @@
       /***/
     },
 
-    /***/ 1577: /***/ function (
+    /***/ 73: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(9582);
+      module.exports = __webpack_require__(3612);
 
       /***/
     },
@@ -980,7 +986,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(1552);
+      return __webpack_exec__(4070);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Commit: cc24ee9

Nhahan · 2024-02-18T23:37:20Z

deployed?

styfle · 2024-02-20T14:27:00Z

@Nhahan Yes, see v14.1.1-canary.49.

You can try it out today with npm install next@canary

fix(next/image): improve warning when fill and sizes="100vw"

96beaaf

styfle requested review from timneutkens, ijjk, shuding, huozhi, ztanner and a team as code owners February 12, 2024 16:20

styfle requested review from timeyoutakeit and molebox and removed request for a team February 12, 2024 16:20

ijjk added area: tests created-by: Next.js team PRs by the Next.js team type: next labels Feb 12, 2024

styfle mentioned this pull request Feb 12, 2024

next/image gives false warning for sizes: 100vw #58586

Closed

1 task

ijjk approved these changes Feb 12, 2024

View reviewed changes

Merge branch 'canary' into styfle/next-2441-fix-warning-sizes-prop

cc24ee9

styfle enabled auto-merge (squash) February 12, 2024 17:07

styfle merged commit 9cf2a32 into canary Feb 12, 2024
69 checks passed

styfle deleted the styfle/next-2441-fix-warning-sizes-prop branch February 12, 2024 17:32

sruenwg mentioned this pull request Mar 4, 2024

Reduce Next.js warnings sugar-cat7/vspo-portal#249

Merged

github-actions bot added the locked label Mar 6, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(next/image): improve warning when `fill` and `sizes="100vw"` #61949

fix(next/image): improve warning when `fill` and `sizes="100vw"` #61949

styfle commented Feb 12, 2024 •

edited

ijjk commented Feb 12, 2024

ijjk commented Feb 12, 2024 •

edited

Nhahan commented Feb 18, 2024

styfle commented Feb 20, 2024

fix(next/image): improve warning when fill and sizes="100vw" #61949

fix(next/image): improve warning when fill and sizes="100vw" #61949

Conversation

styfle commented Feb 12, 2024 • edited

ijjk commented Feb 12, 2024

Failing test suites

ijjk commented Feb 12, 2024 • edited

Stats from current PR

Nhahan commented Feb 18, 2024

styfle commented Feb 20, 2024

fix(next/image): improve warning when `fill` and `sizes="100vw"` #61949

fix(next/image): improve warning when `fill` and `sizes="100vw"` #61949

styfle commented Feb 12, 2024 •

edited

ijjk commented Feb 12, 2024 •

edited