fix: make sure `image-config.ts` gets transpiled to ES5 #34677

balazsorban44 · 2022-02-22T09:45:50Z

image-config.ts is imported client-side, but since it was in the server folder, const was preserved. IE11 did not break (Tested https://balazsorban-34629.vercel.app in IE11), but for consistency's sake, we should make sure this file also gets transpiled so CI checks using

npx es-check es5 '.next/static/**/*.js' -v

can safely pass again.

Fixes #34629

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

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.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

ijjk · 2022-02-22T10:05:56Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
buildDuration	18.7s	18.5s	-137ms
buildDurationCached	7.2s	7.3s	⚠️ +89ms
nodeModulesSize	367 MB	367 MB	⚠️ +45 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.526	3.515	-0.01
/ avg req/sec	708.93	711.32	+2.39
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.634	1.679	⚠️ +0.05
/error-in-render avg req/sec	1530.31	1488.94	⚠️ -41.37

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.8 kB	-88 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.5 kB	-88 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.05 kB	5.05 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 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	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
index.html gzip	532 B	530 B	-2 B
link.html gzip	545 B	544 B	-1 B
withRouter.html gzip	526 B	525 B	-1 B
Overall change	1.6 kB	1.6 kB	-4 B

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e46f7cf4e561503a.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9af46ce04572b728.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-bbf9913b6d4f3129.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -129,7 +129,7 @@
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _imageConfig = __webpack_require__(5809);
+      var _imageConfig = __webpack_require__(9309);
       var _useIntersection = __webpack_require__(7190);
       var _imageConfigContext = __webpack_require__(9977);
       function _defineProperty1(obj, key, value) {

Diff for main-HASH.js

@@ -3913,7 +3913,7 @@
       });
       exports.ImageConfigContext = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _imageConfig = __webpack_require__(5809);
+      var _imageConfig = __webpack_require__(9309);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -3931,6 +3931,38 @@
       /***/
     },
 
+    /***/ 9309: /***/ function(__unused_webpack_module, exports) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
+      var VALID_LOADERS = [
+        "default",
+        "imgix",
+        "cloudinary",
+        "akamai",
+        "custom"
+      ];
+      exports.VALID_LOADERS = VALID_LOADERS;
+      var imageConfigDefault = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default",
+        domains: [],
+        disableStaticImages: false,
+        minimumCacheTTL: 60,
+        formats: ["image/webp"],
+        dangerouslyAllowSVG: false,
+        contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;"
+      };
+      exports.imageConfigDefault = imageConfigDefault; //# sourceMappingURL=image-config.js.map
+
+      /***/
+    },
+
     /***/ 8887: /***/ function(__unused_webpack_module, exports) {
       "use strict";
 
@@ -9314,40 +9346,6 @@
       /***/
     },
 
-    /***/ 5809: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
-      const VALID_LOADERS = [
-        "default",
-        "imgix",
-        "cloudinary",
-        "akamai",
-        "custom"
-      ];
-      exports.VALID_LOADERS = VALID_LOADERS;
-      const imageConfigDefault = {
-        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-        path: "/_next/image",
-        loader: "default",
-        domains: [],
-        disableStaticImages: false,
-        minimumCacheTTL: 60,
-        formats: ["image/webp"],
-        dangerouslyAllowSVG: false,
-        contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`
-      };
-      exports.imageConfigDefault = imageConfigDefault;
-
-      //# sourceMappingURL=image-config.js.map
-
-      /***/
-    },
-
     /***/ 2431: /***/ function() {
       /* (ignored) */
       /***/

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fb5e2092d0159f4.js"
+      src="/_next/static/chunks/main-e56a06991c182536.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fb5e2092d0159f4.js"
+      src="/_next/static/chunks/main-e56a06991c182536.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fb5e2092d0159f4.js"
+      src="/_next/static/chunks/main-e56a06991c182536.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
buildDuration	22.6s	22.1s	-466ms
buildDurationCached	7.2s	7.3s	⚠️ +87ms
nodeModulesSize	367 MB	367 MB	⚠️ +45 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.617	3.511	-0.11
/ avg req/sec	691.17	712.09	+20.92
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.668	1.702	⚠️ +0.03
/error-in-render avg req/sec	1498.42	1469.22	⚠️ -29.2

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	27.9 kB	27.8 kB	-91 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.7 kB	71.6 kB	-91 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
_app-HASH.js gzip	1.35 kB	1.35 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.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.08 kB	5.08 kB	-1 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 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	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	-1 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/transpile-image-config	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-e46f7cf4e561503a.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9af46ce04572b728.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-bbf9913b6d4f3129.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -129,7 +129,7 @@
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _imageConfig = __webpack_require__(5809);
+      var _imageConfig = __webpack_require__(9309);
       var _useIntersection = __webpack_require__(7190);
       var _imageConfigContext = __webpack_require__(9977);
       function _defineProperty1(obj, key, value) {

Diff for main-HASH.js

@@ -3913,7 +3913,7 @@
       });
       exports.ImageConfigContext = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _imageConfig = __webpack_require__(5809);
+      var _imageConfig = __webpack_require__(9309);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -3931,6 +3931,38 @@
       /***/
     },
 
+    /***/ 9309: /***/ function(__unused_webpack_module, exports) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
+      var VALID_LOADERS = [
+        "default",
+        "imgix",
+        "cloudinary",
+        "akamai",
+        "custom"
+      ];
+      exports.VALID_LOADERS = VALID_LOADERS;
+      var imageConfigDefault = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default",
+        domains: [],
+        disableStaticImages: false,
+        minimumCacheTTL: 60,
+        formats: ["image/webp"],
+        dangerouslyAllowSVG: false,
+        contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;"
+      };
+      exports.imageConfigDefault = imageConfigDefault; //# sourceMappingURL=image-config.js.map
+
+      /***/
+    },
+
     /***/ 8887: /***/ function(__unused_webpack_module, exports) {
       "use strict";
 
@@ -9314,40 +9346,6 @@
       /***/
     },
 
-    /***/ 5809: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
-      const VALID_LOADERS = [
-        "default",
-        "imgix",
-        "cloudinary",
-        "akamai",
-        "custom"
-      ];
-      exports.VALID_LOADERS = VALID_LOADERS;
-      const imageConfigDefault = {
-        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-        path: "/_next/image",
-        loader: "default",
-        domains: [],
-        disableStaticImages: false,
-        minimumCacheTTL: 60,
-        formats: ["image/webp"],
-        dangerouslyAllowSVG: false,
-        contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`
-      };
-      exports.imageConfigDefault = imageConfigDefault;
-
-      //# sourceMappingURL=image-config.js.map
-
-      /***/
-    },
-
     /***/ 2431: /***/ function() {
       /* (ignored) */
       /***/

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fb5e2092d0159f4.js"
+      src="/_next/static/chunks/main-e56a06991c182536.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fb5e2092d0159f4.js"
+      src="/_next/static/chunks/main-e56a06991c182536.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fb5e2092d0159f4.js"
+      src="/_next/static/chunks/main-e56a06991c182536.js"
       defer=""
     ></script>
     <script

Commit: 335d889

styfle

Nice catch, thanks!

fix: make sure image-config gets transpiled

335d889

balazsorban44 requested review from timneutkens, ijjk, shuding, styfle and huozhi as code owners February 22, 2022 09:45

ijjk added the type: next label Feb 22, 2022

balazsorban44 changed the title ~~fix: make sure image-config gets transpiled~~ fix: make sure image-config.ts gets transpiled to ES5 Feb 22, 2022

styfle approved these changes Feb 22, 2022

View reviewed changes

michielmetcake approved these changes Feb 22, 2022

View reviewed changes

styfle merged commit 6178e7c into canary Feb 22, 2022

styfle deleted the fix/transpile-image-config branch February 22, 2022 14:27

styfle mentioned this pull request Feb 22, 2022

Update CODEOWNERS to include renamed files #34686

Merged

github-actions bot locked as resolved and limited conversation to collaborators Mar 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: make sure `image-config.ts` gets transpiled to ES5 #34677

fix: make sure `image-config.ts` gets transpiled to ES5 #34677

balazsorban44 commented Feb 22, 2022 •

edited

Loading

ijjk commented Feb 22, 2022

Diffs

Diffs

styfle left a comment

fix: make sure image-config.ts gets transpiled to ES5 #34677

fix: make sure image-config.ts gets transpiled to ES5 #34677

Conversation

balazsorban44 commented Feb 22, 2022 • edited Loading

Bug

Feature

Documentation / Examples

ijjk commented Feb 22, 2022

Stats from current PR

Diffs

Diffs

styfle left a comment

Choose a reason for hiding this comment

fix: make sure `image-config.ts` gets transpiled to ES5 #34677

fix: make sure `image-config.ts` gets transpiled to ES5 #34677

balazsorban44 commented Feb 22, 2022 •

edited

Loading