Image component foundation #17343

atcastle · 2020-09-24T18:58:46Z

This is the first PR for the basic functionality of the image component described in #16832. Functionality included here includes the plumbing required for getting configuration information from the next.config.js file into the image component as it's rendered on the server, in serverless mode, or on the client. Implemented features include rendering of an image tag with computed srcset. Srcset filenames are based on a set of predefined loaders, and widths are based on breakpoints from the next.config.

This is not a complete version of this feature, but can be merged now, as it only affects apps which actually use the new Image component. On this PR I'm mainly interested in feedback around the "plumbing" mechanisms, and if there's anything wrong in the way I'm accessing data from the next.config.js file.

The following are NOT included in this PR. I'm at various stages of completion on these, and will add them in PR's over the next several business days.

Automatic preconnects/preloads via the 'priority' attribute
Support for user-defined image loaders
Conformance measure including required sizing
Additional edge-case/error handling around malformed next.config.js configuration

ijjk · 2020-09-24T19:07:56Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	12s	12.3s	⚠️ +277ms
nodeModulesSize	62.9 MB	62.9 MB	⚠️ +10.9 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.21	2.189	-0.02
/ avg req/sec	1131.31	1142.04	+10.73
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.209	1.191	-0.02
/error-in-render avg req/sec	2067.53	2098.59	+31.06

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-ae38113..ffac.js gzip	7.16 kB	7.16 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8f43483..dule.js gzip	6.23 kB	6.23 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
index.html gzip	1 kB	1.04 kB	⚠️ +39 B
link.html gzip	1.01 kB	1.05 kB	⚠️ +39 B
withRouter.html gzip	996 B	1.03 kB	⚠️ +39 B
Overall change	3.01 kB	3.13 kB	⚠️ +117 B

Diffs

Diff for index.html

@@ -50,6 +50,7 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
+        "images": "{\"hosts\":{\"default\":{\"path\":\"defaultconfig\"}}}",
         "gip": true,
         "head": [
           ["meta", { "charSet": "utf-8" }],

Diff for link.html

@@ -55,6 +55,7 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
+        "images": "{\"hosts\":{\"default\":{\"path\":\"defaultconfig\"}}}",
         "gip": true,
         "head": [
           ["meta", { "charSet": "utf-8" }],

Diff for withRouter.html

@@ -50,6 +50,7 @@
         "query": {},
         "buildId": "BUILD_ID",
         "isFallback": false,
+        "images": "{\"hosts\":{\"default\":{\"path\":\"defaultconfig\"}}}",
         "gip": true,
         "head": [
           ["meta", { "charSet": "utf-8" }],

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	13.6s	13.3s	-284ms
nodeModulesSize	62.9 MB	62.9 MB	⚠️ +10.9 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-ae38113..ffac.js gzip	7.16 kB	7.16 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8f43483..dule.js gzip	6.23 kB	6.23 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
_error.js	1.06 MB	1.06 MB	⚠️ +128 B
404.html	4.34 kB	4.4 kB	⚠️ +66 B
hooks.html	3.92 kB	3.98 kB	⚠️ +66 B
index.js	1.06 MB	1.06 MB	⚠️ +128 B
link.js	1.1 MB	1.1 MB	⚠️ +128 B
routerDirect.js	1.1 MB	1.1 MB	⚠️ +128 B
withRouter.js	1.1 MB	1.1 MB	⚠️ +128 B
Overall change	5.41 MB	5.41 MB	⚠️ +772 B

Commit: 6749745

packages/next/client/image.tsx

ijjk · 2020-10-05T12:35:31Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	13.4s	13.3s	-74ms
nodeModulesSize	63.2 MB	63.2 MB	⚠️ +9.13 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.479	2.495	⚠️ +0.02
/ avg req/sec	1008.54	1002.13	⚠️ -6.41
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.475	1.454	-0.02
/error-in-render avg req/sec	1695.13	1719.48	+24.35

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	15.2s	15s	-202ms
nodeModulesSize	63.2 MB	63.2 MB	⚠️ +9.13 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
_error.js	1.05 MB	1.05 MB	-1 B
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	-1 B
link.js	1.1 MB	1.1 MB	-1 B
routerDirect.js	1.09 MB	1.09 MB	-1 B
withRouter.js	1.09 MB	1.09 MB	-1 B
Overall change	5.4 MB	5.4 MB	-5 B

Commit: 241e835

packages/next/client/image.tsx

packages/next/image.d.ts

…ge-component

ijjk · 2020-10-06T01:35:44Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	13.3s	13s	-279ms
nodeModulesSize	63.2 MB	63.2 MB	⚠️ +14.3 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.495	2.493	0
/ avg req/sec	1001.96	1002.61	+0.65
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.499	1.452	-0.05
/error-in-render avg req/sec	1668.28	1721.64	+53.36

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	14.3s	14.4s	⚠️ +153ms
nodeModulesSize	63.2 MB	63.2 MB	⚠️ +14.3 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
_error.js	1.05 MB	1.05 MB	-1 B
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	-1 B
link.js	1.1 MB	1.1 MB	-1 B
routerDirect.js	1.09 MB	1.09 MB	-1 B
withRouter.js	1.09 MB	1.09 MB	-1 B
Overall change	5.4 MB	5.4 MB	-5 B

Commit: 68f7e71

packages/next/build/webpack-config.ts

packages/next/next-server/server/config.ts

ijjk · 2020-10-06T10:55:39Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	11.8s	11.9s	⚠️ +83ms
nodeModulesSize	63.2 MB	63.2 MB	⚠️ +14.3 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.328	2.266	-0.06
/ avg req/sec	1073.66	1103.04	+29.38
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.41	1.311	-0.1
/error-in-render avg req/sec	1772.57	1906.65	+134.08

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	13.2s	13.2s	-42ms
nodeModulesSize	63.2 MB	63.2 MB	⚠️ +14.3 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
_error.js	1.05 MB	1.05 MB	-1 B
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	-1 B
link.js	1.1 MB	1.1 MB	-1 B
routerDirect.js	1.09 MB	1.09 MB	-1 B
withRouter.js	1.09 MB	1.09 MB	-1 B
Overall change	5.4 MB	5.4 MB	-5 B

Commit: a76af8a

ijjk · 2020-10-06T10:58:54Z

Failing test suites

Commit: a76af8a

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

Image Component Tests > Client-side Image Component Tests > should render an image tag
Image Component Tests > Client-side Image Component Tests > should support passing through arbitrary attributes
Image Component Tests > Client-side Image Component Tests > should modify src with the loader
Image Component Tests > Client-side Image Component Tests > should support manually selecting a different host
Image Component Tests > Client-side Image Component Tests > should add a srcset based on the loader
Image Component Tests > Client-side Image Component Tests > should support the unoptimized attribute
Image Component Tests > Client-side Image Component Tests > should not add a srcset if unoptimized attribute present
Image Component Tests > Client-side Image Component Tests > should NOT add a preload tag for a priority image
Image Component Tests > Client-side Image Component Tests > Client-side Errors > Should log an error when an unregistered host is used
Image Component Tests > SSR Image Component Tests > should render an image tag
Image Component Tests > SSR Image Component Tests > should support passing through arbitrary attributes
Image Component Tests > SSR Image Component Tests > should modify src with the loader
Image Component Tests > SSR Image Component Tests > should support manually selecting a different host
Image Component Tests > SSR Image Component Tests > should add a srcset based on the loader
Image Component Tests > SSR Image Component Tests > should support the unoptimized attribute
Image Component Tests > SSR Image Component Tests > should not add a srcset if unoptimized attribute present
Image Component Tests > SSR Image Component Tests > should add a preload tag for a priority image
Image Component Tests > SSR Image Component Tests > should add a preload tag for a priority image, with secondary host
Image Component Tests > SSR Image Component Tests > should add a preload tag for a priority image, with arbitrary host

Expand output

● Image Component Tests › SSR Image Component Tests › should render an image tag

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should render an image tag

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should support passing through arbitrary attributes

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should support passing through arbitrary attributes

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should modify src with the loader

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should modify src with the loader

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should support manually selecting a different host

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should support manually selecting a different host

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should add a srcset based on the loader

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should add a srcset based on the loader

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should support the unoptimized attribute

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should support the unoptimized attribute

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should not add a srcset if unoptimized attribute present

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should not add a srcset if unoptimized attribute present

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image, with secondary host

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image, with secondary host

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image, with arbitrary host

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image, with arbitrary host

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:85:17

● Image Component Tests › Client-side Image Component Tests › should render an image tag

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should render an image tag

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should support passing through arbitrary attributes

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should support passing through arbitrary attributes

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should modify src with the loader

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should modify src with the loader

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should support manually selecting a different host

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should support manually selecting a different host

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should add a srcset based on the loader

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should add a srcset based on the loader

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should support the unoptimized attribute

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should support the unoptimized attribute

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should not add a srcset if unoptimized attribute present

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should not add a srcset if unoptimized attribute present

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › should NOT add a preload tag for a priority image

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › should NOT add a preload tag for a priority image

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › Client-side Errors › Should log an error when an unregistered host is used

command failed with code 1

  132 |         code !== 0
  133 |       ) {
> 134 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  135 |       }
  136 | 
  137 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:134:23)

● Image Component Tests › Client-side Image Component Tests › Client-side Errors › Should log an error when an unregistered host is used

InvalidArgumentError: invalid argument
  (Session info: headless chrome=85.0.4183.102)

  170 |   console.log(`\n> Loading browser with ${url}\n`)
  171 | 
> 172 |   await browser.get(url)
      |   ^
  173 |   console.log(`\n> Loaded browser with ${url}\n`)
  174 | 
  175 |   // Wait for application to hydrate

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at _default (lib/next-webdriver.js:172:3)
  at integration/image-component/basic/test/index.test.js:115:17

● Image Component Tests › Client-side Image Component Tests › Client-side Errors › Should log an error when an unregistered host is used

TypeError: Cannot read property 'eval' of null

  129 |     describe('Client-side Errors', () => {
  130 |       beforeAll(async () => {
> 131 |         await browser.eval(`(function() {
      |                       ^
  132 |           window.gotHostError = false
  133 |           const origError = console.error
  134 |           window.console.error = function () {

  at integration/image-component/basic/test/index.test.js:131:23

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  275 | export async function killApp(instance) {
  276 |   await new Promise((resolve, reject) => {
> 277 |     treeKill(instance.pid, (err) => {
      |                       ^
  278 |       if (err) {
  279 |         if (
  280 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:277:23
  at killApp (lib/next-test-utils.js:276:9)
  at integration/image-component/basic/test/index.test.js:82:18

…ge-component

ijjk · 2020-10-13T17:25:08Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	12.2s	12.2s	-8ms
nodeModulesSize	63.4 MB	63.4 MB	⚠️ +15.4 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.262	2.285	⚠️ +0.02
/ avg req/sec	1105.14	1094.09	⚠️ -11.05
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.223	1.239	⚠️ +0.02
/error-in-render avg req/sec	2043.46	2017.66	⚠️ -25.8

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..133b.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-2540b2f..aa10.js gzip	7.22 kB	7.22 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-0d1e0b8..dule.js gzip	6.28 kB	6.28 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component	Change
buildDuration	13.7s	13.5s	-238ms
nodeModulesSize	63.4 MB	63.4 MB	⚠️ +15.4 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..133b.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-2540b2f..aa10.js gzip	7.22 kB	7.22 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-0d1e0b8..dule.js gzip	6.28 kB	6.28 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js image-component	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	azukaru/next.js image-component	Change
_error.js	1.05 MB	1.05 MB	-1 B
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	-1 B
link.js	1.1 MB	1.1 MB	-1 B
routerDirect.js	1.09 MB	1.09 MB	-1 B
withRouter.js	1.09 MB	1.09 MB	-1 B
Overall change	5.41 MB	5.41 MB	-5 B

Commit: 2f0098b

janicklas-ralph · 2020-10-13T19:19:38Z

packages/next/client/image.tsx

+    <div>
+      {shouldPreload
+        ? generatePreload({
+            src,


We can pass imgSrc instead and avoid recomputing the src?

rashidul0405 · 2020-10-15T05:06:36Z

is this a good idea from SEO perspective to have an image URL like this: ?w=480 480w?

atcastle added 8 commits September 24, 2020 11:16

Create stub of image component

5cdd37a

Expand test coverage to include client-side component usage

03e3b96

Basic pass through src on image component

4a7243a

Data pipeline from config to browser and server on all targets

354e0ab

Add support for multiple hosts

22e1ddf

Add support for the 'unoptimized' attribute to the image component

144812a

Add basic loader support and srcsets

3090223

Minor cleanups

6749745

atcastle requested review from ijjk, lfades, Timer and timneutkens as code owners September 24, 2020 18:58

ijjk added the type: next label Sep 24, 2020

janicklas-ralph reviewed Sep 25, 2020

View reviewed changes

packages/next/client/image.tsx Show resolved Hide resolved

timneutkens reviewed Oct 2, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

Simplify image config loading

241e835

timneutkens previously approved these changes Oct 5, 2020

View reviewed changes

atcastle added 2 commits October 5, 2020 09:45

Add priority attribute

016aef7

Handle unregistered host

2aee017

prateekbh reviewed Oct 5, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

packages/next/client/image.tsx Outdated Show resolved Hide resolved

packages/next/image.d.ts Show resolved Hide resolved

timneutkens and others added 3 commits October 5, 2020 18:24

Simplify image config loading

f02580b

Add checking for malformed images property in next.config.js

bcf5464

Merge branch 'image-component' of github.com:azukaru/next.js into ima…

68f7e71

…ge-component

atcastle dismissed timneutkens’s stale review via 68f7e71 October 6, 2020 01:24

timneutkens reviewed Oct 6, 2020

View reviewed changes

packages/next/build/webpack-config.ts Outdated Show resolved Hide resolved

Update packages/next/build/webpack-config.ts

a76af8a

timneutkens reviewed Oct 6, 2020

View reviewed changes

packages/next/next-server/server/config.ts Show resolved Hide resolved

atcastle mentioned this pull request Oct 7, 2020

ESLint rules for the image component #17694

Closed

atcastle added 4 commits October 8, 2020 15:38

fix obsolete test and filepath issues

f7b832d

Merge branch 'image-component' of github.com:azukaru/next.js into ima…

87d650e

…ge-component

Normalize host and src paths

60e057b

Merge remote-tracking branch 'origin/canary' into image-component

2f0098b

janicklas-ralph reviewed Oct 13, 2020

View reviewed changes

timneutkens approved these changes Oct 14, 2020

View reviewed changes

timneutkens merged commit 87175fe into vercel:canary Oct 14, 2020

timneutkens deleted the image-component branch October 14, 2020 09:57

ijjk added the hacktoberfest-accepted label Oct 14, 2020

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image component foundation #17343

Image component foundation #17343

atcastle commented Sep 24, 2020

ijjk commented Sep 24, 2020

Diffs

ijjk commented Oct 5, 2020

ijjk commented Oct 6, 2020

ijjk commented Oct 6, 2020

ijjk commented Oct 6, 2020

ijjk commented Oct 13, 2020

janicklas-ralph Oct 13, 2020

rashidul0405 commented Oct 15, 2020

Image component foundation #17343

Image component foundation #17343

Conversation

atcastle commented Sep 24, 2020

ijjk commented Sep 24, 2020

Stats from current PR

Diffs

ijjk commented Oct 5, 2020

Stats from current PR

ijjk commented Oct 6, 2020

Stats from current PR

ijjk commented Oct 6, 2020

Stats from current PR

ijjk commented Oct 6, 2020

Failing test suites

ijjk commented Oct 13, 2020

Stats from current PR

janicklas-ralph Oct 13, 2020

Choose a reason for hiding this comment

rashidul0405 commented Oct 15, 2020