Relax warning for `next/image` loader width #30562

styfle · 2021-10-28T15:48:32Z

Some users reported false hits when using complex loaders that implement Art Direction.

We can relax the warnings so that query string params named width should not warn.

ijjk · 2021-10-28T19:45:07Z

Failing test suites

Commit: 5e3e146

test/integration/image-component/typescript/test/index.test.js

TypeScript Image Component > next dev > should render the valid Image usage and not print error

Expand output

● TypeScript Image Component › next dev › should render the valid Image usage and not print error

expect(received).toMatch(expected)

Expected pattern: /This is valid usage of the Image component/
Received string:  "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1635450292259\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1635450292259\" defer=\"\"></script><script src=\"/_next/static/chunks/main.js?ts=1635450292259\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1635450292259\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_error.js?ts=1635450292259\" defer=\"\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1635450292259\" defer=\"\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1635450292259\" defer=\"\"></script><script src=\"/_next/static/development/_middlewareManifest.js?ts=1635450292259\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1635450292259\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{\"__NEXT_PAGE\":\"/valid\"},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"message\":\"Invalid src prop (data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=) on `next/image`, hostname \\\"\\\" is not configured under images in your `next.config.js`\\nSee more info: https://nextjs.org/docs/messages/next-image-unconfigured-host\",\"stack\":\"Error: Invalid src prop (data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=) on `next/image`, hostname \\\"\\\" is not configured under images in your `next.config.js`\\nSee more info: https://nextjs.org/docs/messages/next-image-unconfigured-host\\n    at defaultLoader (/home/runner/work/next.js/next.js/test/integration/image-component/typescript/.next/server/pages/valid.js:686:23)\\n    at defaultImageLoader (/home/runner/work/next.js/next.js/test/integration/image-component/typescript/.next/server/pages/valid.js:283:16)\\n    at Image (/home/runner/work/next.js/next.js/test/integration/image-component/typescript/.next/server/pages/valid.js:442:27)\\n    at processChild (/home/runner/work/next.js/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)\\n    at resolve (/home/runner/work/next.js/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)\\n    at ReactDOMServerRenderer.render (/home/runner/work/next.js/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)\\n    at ReactDOMServerRenderer.read (/home/runner/work/next.js/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)\\n    at Object.renderToString (/home/runner/work/next.js/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)\\n    at Object.renderPage (/home/runner/work/next.js/next.js/packages/next/dist/server/render.js:621:45)\\n    at Object.defaultGetInitialProps (/home/runner/work/next.js/next.js/packages/next/dist/server/render.js:301:51)\"},\"gip\":true,\"scriptLoader\":[]}</script></body></html>"

  66 |     it('should render the valid Image usage and not print error', async () => {
  67 |       const html = await renderViaHTTP(appPort, '/valid', {})
> 68 |       expect(html).toMatch(/This is valid usage of the Image component/)
     |                    ^
  69 |       expect(output).not.toMatch(/Error: Image/)
  70 |     })
  71 |

  at Object.<anonymous> (integration/image-component/typescript/test/index.test.js:68:20)

test/integration/image-component/default/test/index.test.js

Image Component Tests > dev mode > should callback onLoadingComplete when image is fully loaded
Image Component Tests > dev mode > should work with image with blob src

Expand output

● Image Component Tests › dev mode › should callback onLoadingComplete when image is fully loaded

TIMED OUT: /test(.*)jpg/

null

  451 |
  452 |   if (hardError) {
> 453 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  454 |   }
  455 |   return false
  456 | }

  at Object.check (lib/next-test-utils.js:453:11)
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:198:7)

● Image Component Tests › dev mode › should work with image with blob src

TIMED OUT: /^blob:/

null

  451 |
  452 |   if (hardError) {
> 453 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  454 |   }
  455 |   return false
  456 | }

  at Object.check (lib/next-test-utils.js:453:11)
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:250:7)

ijjk · 2021-10-28T22:08:20Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
buildDuration	22s	21.4s	-571ms
buildDurationCached	4.4s	4.4s	⚠️ +10ms
nodeModulesSize	198 MB	198 MB	⚠️ +269 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.772	3.808	⚠️ +0.04
/ avg req/sec	662.84	656.44	⚠️ -6.4
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.129	2.046	-0.08
/error-in-render avg req/sec	1174.05	1222.06	+48.01

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28 kB	28 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	71.9 kB	71.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-62a3db573e84bff3.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b7c6bb576d555267.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -490,7 +490,7 @@
           isLazy = false;
         }
         if (false) {
-          var rand, VALID_BLUR_EXT;
+          var url, rand, VALID_BLUR_EXT;
         }
         var ref2 = _slicedToArray(
             (0, _useIntersection).useIntersection({

Default Build with SWC

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
buildDuration	18.6s	18.6s	⚠️ +27ms
buildDurationCached	4.4s	4.4s	-44ms
nodeModulesSize	198 MB	198 MB	⚠️ +269 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.802	3.791	-0.01
/ avg req/sec	657.47	659.47	+2
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.034	2.032	0
/error-in-render avg req/sec	1228.99	1230.44	+1.45

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	✓
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js relax-img-loader-warning-for-width	Change
index.html gzip	534 B	534 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-62a3db573e84bff3.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b7c6bb576d555267.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -490,7 +490,7 @@
           isLazy = false;
         }
         if (false) {
-          var rand, VALID_BLUR_EXT;
+          var url, rand, VALID_BLUR_EXT;
         }
         var ref2 = _slicedToArray(
             (0, _useIntersection).useIntersection({

Commit: 6d6d7d8

styfle requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners October 28, 2021 15:48

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Oct 28, 2021

styfle changed the title ~~Relax img loader warning for width~~ Relax warning for next/image loader width Oct 28, 2021

Relax warning for next/image loader width

f3c63f7

styfle force-pushed the relax-img-loader-warning-for-width branch from 61f808c to f3c63f7 Compare October 28, 2021 15:51

Add footer scroll to test

8313d81

ijjk previously approved these changes Oct 28, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

Merge branch 'canary' into relax-img-loader-warning-for-width

5e3e146

Fix bug where loader() was called prematurely

3cff87f

styfle dismissed ijjk’s stale review via 3cff87f October 28, 2021 21:26

This comment has been minimized.

Sign in to view

ijjk approved these changes Oct 28, 2021

View reviewed changes

Merge branch 'canary' into relax-img-loader-warning-for-width

6d6d7d8

kodiakhq bot merged commit c4ee78f into canary Oct 28, 2021

kodiakhq bot deleted the relax-img-loader-warning-for-width branch October 28, 2021 22:32

styfle mentioned this pull request Oct 29, 2021

Relax warning for next/image loader width even more #30624

Merged

styfle added the hacktoberfest-accepted label Oct 31, 2021

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Relax warning for `next/image` loader width #30562

Relax warning for `next/image` loader width #30562

styfle commented Oct 28, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 28, 2021 •

edited

Loading

This comment has been minimized.

ijjk commented Oct 28, 2021

Diffs

Diffs

Relax warning for next/image loader width #30562

Relax warning for next/image loader width #30562

Conversation

styfle commented Oct 28, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 28, 2021 • edited Loading

Failing test suites

This comment has been minimized.

ijjk commented Oct 28, 2021

Stats from current PR

Diffs

Diffs

Relax warning for `next/image` loader width #30562

Relax warning for `next/image` loader width #30562

ijjk commented Oct 28, 2021 •

edited

Loading