Fix Image compatibility issue when using `sizes` #24569

shuding · 2021-04-28T18:43:13Z

When using sizes, matchAll isn't supported by older browsers like IE and Safari 12. This PR changes it to exec.

There're already tests of sizes with multiple vw values covered.

Fixes #23677, #24473.

Bug

Related issues linked using fixes #number
Integration tests added

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.

Documentation / Examples

Make sure the linting passes

ijjk · 2021-04-28T20:46:33Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
buildDuration	11.2s	11.3s	⚠️ +139ms
buildDurationCached	3.8s	3.5s	-260ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +285 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.951	1.972	⚠️ +0.02
/ avg req/sec	1281.72	1267.64	⚠️ -14.08
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	0.99	1.024	⚠️ +0.03
/error-in-render avg req/sec	2524.19	2440.77	⚠️ -83.42

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.11 kB	7.11 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
index.html gzip	610 B	610 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
buildDuration	14.1s	13.8s	-227ms
buildDurationCached	5.2s	5.3s	⚠️ +85ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +285 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.11 kB	7.11 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Serverless bundles

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.96 kB	1.96 kB	✓
css.html	2.13 kB	2.13 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	⚠️ +2 B
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	-2 B
Overall change	7.14 MB	7.14 MB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
buildDuration	9.5s	9.7s	⚠️ +182ms
buildDurationCached	3.9s	4.1s	⚠️ +131ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +285 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.899	1.925	⚠️ +0.03
/ avg req/sec	1316.73	1298.67	⚠️ -18.06
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.007	0.967	-0.04
/error-in-render avg req/sec	2481.77	2584.6	+102.83

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.18 kB	7.18 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.36 kB	9.36 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_buildManifest.js gzip	419 B	419 B	✓
Overall change	419 B	419 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	606 B	606 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 6af342e

ijjk · 2021-04-29T09:41:04Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
buildDuration	14.4s	14.5s	⚠️ +63ms
buildDurationCached	4.5s	4.3s	-188ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +285 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.444	2.431	-0.01
/ avg req/sec	1022.99	1028.33	+5.34
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.268	1.298	⚠️ +0.03
/error-in-render avg req/sec	1971.28	1925.55	⚠️ -45.73

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.11 kB	7.11 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
index.html gzip	610 B	610 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
buildDuration	17.1s	17.4s	⚠️ +230ms
buildDurationCached	6.6s	6.7s	⚠️ +36ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +285 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.11 kB	7.11 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Serverless bundles

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.96 kB	1.96 kB	✓
css.html	2.13 kB	2.13 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	✓

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
buildDuration	12.2s	12.1s	-130ms
buildDurationCached	5s	4.9s	-82ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +285 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.364	2.453	⚠️ +0.09
/ avg req/sec	1057.51	1019.28	⚠️ -38.23
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.266	1.251	-0.02
/error-in-render avg req/sec	1973.95	1998.97	+25.02

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.18 kB	7.18 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.36 kB	9.36 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
_buildManifest.js gzip	419 B	419 B	✓
Overall change	419 B	419 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-next-image-compatibility	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	606 B	606 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 5782112

When using `sizes`, [`matchAll`](https://caniuse.com/mdn-javascript_builtins_string_matchall) isn't supported by older browsers like IE and Safari 12. This PR changes it to `exec`. There're already tests of `sizes` with multiple `vw` values covered. Fixes vercel#23677. ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [ ] Make sure the linting passes

use exec instead of matchAll

d5e8bc9

ijjk added the type: next label Apr 28, 2021

shuding marked this pull request as ready for review April 28, 2021 18:43

shuding requested review from divmain, ijjk, lfades and timneutkens as code owners April 28, 2021 18:43

This comment has been minimized.

Sign in to view

Merge branch 'canary' into fix-next-image-compatibility

6af342e

timneutkens approved these changes Apr 29, 2021

View reviewed changes

Merge branch 'canary' into fix-next-image-compatibility

5782112

kodiakhq bot merged commit 89d2c4e into vercel:canary Apr 29, 2021

shuding deleted the fix-next-image-compatibility branch April 29, 2021 10:38

shuding mentioned this pull request Apr 29, 2021

[next/image] On IE11, with layout="responsive" | "fill" + sizes prop, object doesn't support property "matchAll" #24473

Closed

timneutkens mentioned this pull request May 6, 2021

Image "sizes" prop breaks older browsers becuse String.prototype.matchAll is not polyfilled #24862

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Image compatibility issue when using `sizes` #24569

Fix Image compatibility issue when using `sizes` #24569

shuding commented Apr 28, 2021 •

edited

This comment has been minimized.

ijjk commented Apr 28, 2021

ijjk commented Apr 29, 2021

Fix Image compatibility issue when using sizes #24569

Fix Image compatibility issue when using sizes #24569

Conversation

shuding commented Apr 28, 2021 • edited

Bug

Feature

Documentation / Examples

This comment has been minimized.

ijjk commented Apr 28, 2021

Stats from current PR

ijjk commented Apr 29, 2021

Stats from current PR

Fix Image compatibility issue when using `sizes` #24569

Fix Image compatibility issue when using `sizes` #24569

shuding commented Apr 28, 2021 •

edited