next.js icon indicating copy to clipboard operation
next.js copied to clipboard

refactor: bump the default compile target to es2016

Open SukkaW opened this issue 3 years ago • 4 comments
trafficstars

Bump the default swc build target to es2016.

Next.js already uses es2016 for precompiling client-side core lib way back in Next.js 11.0.2 (#27196, by @timneutkens). Even though the user code is still compiled against es5, the application using Next.js is actually not es5 compatible anymore. So it makes sense to bump the user code compiling target from es5 to es2016, to match the Next.js core client-side code.

The PR shouldn't be considered as a breaking change since Next.js core client-side code already targets es2016 and every Next.js application is already sort of broken on IE 11 way back in Next.js 11.0.2, but no related issue has been fired.

After the PR, the overall bundle size is decreased by 6.21 kB (after gzipped).

SukkaW avatar Jul 05 '22 06:07 SukkaW

Stats from current PR

Default Build (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
buildDuration 19.4s 19.3s -52ms
buildDurationCached 7s 7.1s ⚠️ +98ms
nodeModulesSize 1.94 GB 1.94 GB ⚠️ +24 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
/ failed reqs 0 0
/ total time (seconds) 4.589 4.628 ⚠️ +0.04
/ avg req/sec 544.81 540.18 ⚠️ -4.63
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.803 1.806 0
/error-in-render avg req/sec 1386.29 1384.59 ⚠️ -1.7
Client Bundles (main, webpack) Overall decrease ✓
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
299.HASH.js gzip 179 B N/A N/A
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 30.7 kB 24.5 kB -6.21 kB
webpack-HASH.js gzip 1.54 kB 1.54 kB
128.HASH.js gzip N/A 186 B N/A
Overall change 74.4 kB 68.2 kB -6.2 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall decrease ✓
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
_app-HASH.js gzip 825 B 650 B -175 B
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 495 B 502 B ⚠️ +7 B
css-HASH.js gzip 328 B 329 B ⚠️ +1 B
dynamic-HASH.js gzip 2.47 kB 2.29 kB -180 B
head-HASH.js gzip 356 B 356 B
hooks-HASH.js gzip 805 B 384 B -421 B
image-HASH.js gzip 5.21 kB 4.91 kB -296 B
index-HASH.js gzip 263 B 265 B ⚠️ +2 B
link-HASH.js gzip 2.34 kB 2.27 kB -68 B
routerDirect..HASH.js gzip 321 B 320 B -1 B
script-HASH.js gzip 391 B 394 B ⚠️ +3 B
withRouter-HASH.js gzip 318 B 319 B ⚠️ +1 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.4 kB 13.3 kB -1.13 kB
Client Build Manifests Overall increase ⚠️
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
_buildManifest.js gzip 458 B 460 B ⚠️ +2 B
Overall change 458 B 460 B ⚠️ +2 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
index.html gzip 520 B 522 B ⚠️ +2 B
link.html gzip 536 B 537 B ⚠️ +1 B
withRouter.html gzip 516 B 517 B ⚠️ +1 B
Overall change 1.57 kB 1.58 kB ⚠️ +4 B
Middleware size Overall decrease ✓
vercel/next.js canary SukkaW/next.js swc-bump-minimum-ecma-version Change
middleware-m..st.json gzip 185 B 185 B
middleware.js gzip 16.9 kB 16.9 kB -1 B
edge-runtime..pack.js gzip 1.79 kB 1.79 kB
Overall change 18.9 kB 18.9 kB -1 B

Diffs

Diff for middleware.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [826],
   {
-    /***/ 776: /***/ (
+    /***/ 457: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,7 +14,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        222
+        35
       );
 
       // The condition is true when the "process" module is provided
@@ -24,7 +24,7 @@
         __webpack_require__.g.process = process;
       }
 
-      var mod = __webpack_require__(724);
+      var mod = __webpack_require__(623);
       var handler = mod.middleware || mod.default;
 
       if (typeof handler !== "function") {
@@ -50,7 +50,7 @@
       /***/
     },
 
-    /***/ 724: /***/ (
+    /***/ 623: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -62,7 +62,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        335
+        897
       );
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_server__WEBPACK_IMPORTED_MODULE_0__
@@ -75,7 +75,7 @@
       /***/
     },
 
-    /***/ 734: /***/ (__unused_webpack_module, exports) => {
+    /***/ 242: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -95,7 +95,7 @@
       /***/
     },
 
-    /***/ 893: /***/ (__unused_webpack_module, exports) => {
+    /***/ 936: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -133,7 +133,7 @@
       /***/
     },
 
-    /***/ 142: /***/ (__unused_webpack_module, exports) => {
+    /***/ 846: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -165,7 +165,7 @@
       /***/
     },
 
-    /***/ 777: /***/ (
+    /***/ 893: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -176,8 +176,8 @@
         value: true
       });
       exports.addLocale = addLocale;
-      var _addPathPrefix = __webpack_require__(774);
-      var _pathHasPrefix = __webpack_require__(841);
+      var _addPathPrefix = __webpack_require__(466);
+      var _pathHasPrefix = __webpack_require__(590);
       function addLocale(path, locale, defaultLocale, ignorePrefix) {
         if (
           locale &&
@@ -197,7 +197,7 @@
       /***/
     },
 
-    /***/ 774: /***/ (
+    /***/ 466: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -208,7 +208,7 @@
         value: true
       });
       exports.addPathPrefix = addPathPrefix;
-      var _parsePath = __webpack_require__(70);
+      var _parsePath = __webpack_require__(422);
       function addPathPrefix(path, prefix) {
         if (!path.startsWith("/") || !prefix) {
           return path;
@@ -220,7 +220,7 @@
       /***/
     },
 
-    /***/ 114: /***/ (
+    /***/ 458: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -231,7 +231,7 @@
         value: true
       });
       exports.addPathSuffix = addPathSuffix;
-      var _parsePath = __webpack_require__(70);
+      var _parsePath = __webpack_require__(422);
       function addPathSuffix(path, suffix) {
         if (!path.startsWith("/") || !suffix) {
           return path;
@@ -243,17 +243,21 @@
       /***/
     },
 
-    /***/ 36: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
+    /***/ 613: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.formatNextPathnameInfo = formatNextPathnameInfo;
-      var _removeTrailingSlash = __webpack_require__(675);
-      var _addPathPrefix = __webpack_require__(774);
-      var _addPathSuffix = __webpack_require__(114);
-      var _addLocale = __webpack_require__(777);
+      var _removeTrailingSlash = __webpack_require__(77);
+      var _addPathPrefix = __webpack_require__(466);
+      var _addPathSuffix = __webpack_require__(458);
+      var _addLocale = __webpack_require__(893);
       function formatNextPathnameInfo(info) {
         let pathname = (0, _addLocale).addLocale(
           info.pathname,
@@ -281,7 +285,7 @@
       /***/
     },
 
-    /***/ 763: /***/ (
+    /***/ 769: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -292,9 +296,9 @@
         value: true
       });
       exports.getNextPathnameInfo = getNextPathnameInfo;
-      var _normalizeLocalePath = __webpack_require__(142);
-      var _removePathPrefix = __webpack_require__(565);
-      var _pathHasPrefix = __webpack_require__(841);
+      var _normalizeLocalePath = __webpack_require__(846);
+      var _removePathPrefix = __webpack_require__(344);
+      var _pathHasPrefix = __webpack_require__(590);
       function getNextPathnameInfo(pathname, options) {
         var _nextConfig;
         const { basePath, i18n, trailingSlash } =
@@ -344,7 +348,7 @@
       /***/
     },
 
-    /***/ 70: /***/ (__unused_webpack_module, exports) => {
+    /***/ 422: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -380,7 +384,7 @@
       /***/
     },
 
-    /***/ 841: /***/ (
+    /***/ 590: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -391,7 +395,7 @@
         value: true
       });
       exports.pathHasPrefix = pathHasPrefix;
-      var _parsePath = __webpack_require__(70);
+      var _parsePath = __webpack_require__(422);
       function pathHasPrefix(path, prefix) {
         if (typeof path !== "string") {
           return false;
@@ -403,7 +407,7 @@
       /***/
     },
 
-    /***/ 564: /***/ (__unused_webpack_module, exports) => {
+    /***/ 52: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -422,7 +426,7 @@
       /***/
     },
 
-    /***/ 565: /***/ (
+    /***/ 344: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -433,7 +437,7 @@
         value: true
       });
       exports.removePathPrefix = removePathPrefix;
-      var _pathHasPrefix = __webpack_require__(841);
+      var _pathHasPrefix = __webpack_require__(590);
       function removePathPrefix(path, prefix) {
         if ((0, _pathHasPrefix).pathHasPrefix(path, prefix)) {
           const withoutPrefix = path.slice(prefix.length);
@@ -447,7 +451,7 @@
       /***/
     },
 
-    /***/ 675: /***/ (__unused_webpack_module, exports) => {
+    /***/ 77: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -461,7 +465,7 @@
       /***/
     },
 
-    /***/ 748: /***/ module => {
+    /***/ 54: /***/ module => {
       var __dirname = "/";
       (() => {
         "use strict";
@@ -589,7 +593,7 @@
       /***/
     },
 
-    /***/ 491: /***/ (module, exports, __webpack_require__) => {
+    /***/ 826: /***/ (module, exports, __webpack_require__) => {
       var __dirname = "/";
       var __WEBPACK_AMD_DEFINE_RESULT__;
       (() => {
@@ -1431,11 +1435,7 @@
       /***/
     },
 
-    /***/ 222: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 35: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
       var __webpack_unused_export__;
 
@@ -1444,13 +1444,13 @@
       };
       exports.VL = adapter;
       exports.OT = blockUnallowedResponse;
-      var _error = __webpack_require__(626);
-      var _utils = __webpack_require__(20);
-      var _fetchEvent = __webpack_require__(575);
-      var _request = __webpack_require__(989);
-      var _response = __webpack_require__(690);
-      var _relativizeUrl = __webpack_require__(564);
-      var _nextUrl = __webpack_require__(685);
+      var _error = __webpack_require__(182);
+      var _utils = __webpack_require__(93);
+      var _fetchEvent = __webpack_require__(339);
+      var _request = __webpack_require__(67);
+      var _response = __webpack_require__(367);
+      var _relativizeUrl = __webpack_require__(52);
+      var _nextUrl = __webpack_require__(322);
       async function adapter(params) {
         const requestUrl = new _nextUrl.NextURL(params.request.url, {
           headers: params.request.headers,
@@ -1616,7 +1616,7 @@
       /***/
     },
 
-    /***/ 626: /***/ (__unused_webpack_module, exports) => {
+    /***/ 182: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1657,7 +1657,7 @@
       /***/
     },
 
-    /***/ 685: /***/ (
+    /***/ 322: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1667,10 +1667,10 @@
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _detectDomainLocale = __webpack_require__(893);
-      var _formatNextPathnameInfo = __webpack_require__(36);
-      var _getHostname = __webpack_require__(734);
-      var _getNextPathnameInfo = __webpack_require__(763);
+      var _detectDomainLocale = __webpack_require__(936);
+      var _formatNextPathnameInfo = __webpack_require__(613);
+      var _getHostname = __webpack_require__(242);
+      var _getNextPathnameInfo = __webpack_require__(769);
       const Internal = Symbol("NextURLInternal");
       class NextURL {
         constructor(input, baseOrOpts, opts) {
@@ -1891,7 +1891,7 @@
       /***/
     },
 
-    /***/ 508: /***/ (
+    /***/ 256: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1907,8 +1907,8 @@
           return _types.CookieSerializeOptions;
         }
       });
-      var _cookie = _interopRequireDefault(__webpack_require__(748));
-      var _types = __webpack_require__(229);
+      var _cookie = _interopRequireDefault(__webpack_require__(54));
+      var _types = __webpack_require__(880);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -2040,7 +2040,7 @@
       /***/
     },
 
-    /***/ 575: /***/ (
+    /***/ 339: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2051,7 +2051,7 @@
         value: true
       });
       exports.waitUntilSymbol = void 0;
-      var _error = __webpack_require__(626);
+      var _error = __webpack_require__(182);
       const responseSymbol = Symbol("response");
       const passThroughSymbol = Symbol("passThrough");
       const waitUntilSymbol = Symbol("waitUntil");
@@ -2104,21 +2104,17 @@
       /***/
     },
 
-    /***/ 989: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 67: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.INTERNALS = void 0;
-      var _nextUrl = __webpack_require__(685);
-      var _utils = __webpack_require__(20);
-      var _error = __webpack_require__(626);
-      var _cookies = __webpack_require__(508);
+      var _nextUrl = __webpack_require__(322);
+      var _utils = __webpack_require__(93);
+      var _error = __webpack_require__(182);
+      var _cookies = __webpack_require__(256);
       const INTERNALS = Symbol("internal request");
       exports.INTERNALS = INTERNALS;
       class NextRequest extends Request {
@@ -2165,7 +2161,7 @@
       /***/
     },
 
-    /***/ 690: /***/ (
+    /***/ 367: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2175,9 +2171,9 @@
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _nextUrl = __webpack_require__(685);
-      var _utils = __webpack_require__(20);
-      var _cookies = __webpack_require__(508);
+      var _nextUrl = __webpack_require__(322);
+      var _utils = __webpack_require__(93);
+      var _cookies = __webpack_require__(256);
       const INTERNALS = Symbol("internal response");
       const REDIRECTS = new Set([301, 302, 303, 307, 308]);
       class NextResponse extends Response {
@@ -2252,7 +2248,7 @@
       /***/
     },
 
-    /***/ 240: /***/ (
+    /***/ 932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2266,7 +2262,7 @@
       __webpack_unused_export__ = isBot;
       exports.Nf = userAgentFromString;
       exports.WE = userAgent;
-      var _uaParserJs = _interopRequireDefault(__webpack_require__(491));
+      var _uaParserJs = _interopRequireDefault(__webpack_require__(826));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -2294,7 +2290,7 @@
       /***/
     },
 
-    /***/ 229: /***/ (__unused_webpack_module, exports) => {
+    /***/ 880: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2306,7 +2302,7 @@
       /***/
     },
 
-    /***/ 20: /***/ (__unused_webpack_module, exports) => {
+    /***/ 93: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2421,17 +2417,17 @@
       /***/
     },
 
-    /***/ 335: /***/ (
+    /***/ 897: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       module.exports = {
-        NextRequest: __webpack_require__(989).NextRequest,
-        NextResponse: __webpack_require__(690).NextResponse,
-        userAgentFromString: __webpack_require__(240) /* .userAgentFromString */
+        NextRequest: __webpack_require__(67).NextRequest,
+        NextResponse: __webpack_require__(367).NextResponse,
+        userAgentFromString: __webpack_require__(932) /* .userAgentFromString */
           .Nf,
-        userAgent: __webpack_require__(240) /* .userAgent */.WE
+        userAgent: __webpack_require__(932) /* .userAgent */.WE
       };
 
       /***/
@@ -2441,7 +2437,7 @@
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = moduleId =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ var __webpack_exports__ = __webpack_exec__(776);
+    /******/ var __webpack_exports__ = __webpack_exec__(457);
     /******/ (_ENTRIES =
       typeof _ENTRIES === "undefined"
         ? {}
Diff for _buildManifest.js
@@ -1,25 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-006025f296d93d1f.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-ec6f2dc249481230.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-a331316989d05f14.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-a97d0612e1e881ac.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-7c674188292aca70.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-9e2aa8bf4dc7fc42.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-68d7610c482ac563.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-195049e6454580b3.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-1a46c7fc3689a056.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-e2153d6d0b4fffae.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-c040cbe8d466bcb1.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-6bf8c96929eda019.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-a66f15dd084401b4.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-d5bf2b3900d2bf53.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-f5c791ade4876805.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-07ed50edafda8459.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-e03d182fa43cc762.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b6e388f38a25246b.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-19c824ccc8950973.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-8a036a4ae9e5d6ed.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-c3bfac97d4fbba00.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-5815dbc80832e64c.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-d6891bab587638a3.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-dee19dca16003991.js"
   ],
   sortedPages: [
     "\u002F",
Diff for _app-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [888],
   {
-    /***/ 3479: /***/ function(
+    /***/ 122: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(5909);
+          return __webpack_require__(777);
         }
       ]);
       if (false) {
@@ -18,38 +18,31 @@
       /***/
     },
 
-    /***/ 5909: /***/ function(
+    /***/ 777: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
-      var _class_call_check = __webpack_require__(105) /* ["default"] */.Z;
-      var _create_class = __webpack_require__(3031) /* ["default"] */.Z;
-      var _inherits = __webpack_require__(6461) /* ["default"] */.Z;
-      var _interop_require_default = __webpack_require__(6993) /* ["default"] */
-        .Z;
-      var _create_super = __webpack_require__(7615) /* ["default"] */.Z;
-      var _runtimeJs = _interop_require_default(__webpack_require__(739));
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       Object.defineProperty(exports, "AppInitialProps", {
         enumerable: true,
-        get: function get() {
+        get: function() {
           return _utils.AppInitialProps;
         }
       });
       Object.defineProperty(exports, "NextWebVitalsMetric", {
         enumerable: true,
-        get: function get() {
+        get: function() {
           return _utils.NextWebVitalsMetric;
         }
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _utils = __webpack_require__(2973);
+      var _utils = __webpack_require__(6326);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -118,54 +111,27 @@
         _appGetInitialProps = /**
          * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
          * This allows for keeping state between navigation, custom error handling, injecting additional data.
-         */ _asyncToGenerator(
-          _runtimeJs.default.mark(function _callee(param) {
-            var Component, ctx, pageProps;
-            return _runtimeJs.default.wrap(function _callee$(_ctx) {
-              while (1)
-                switch ((_ctx.prev = _ctx.next)) {
-                  case 0:
-                    (Component = param.Component), (ctx = param.ctx);
-                    _ctx.next = 3;
-                    return (0, _utils).loadGetInitialProps(Component, ctx);
-                  case 3:
-                    pageProps = _ctx.sent;
-                    return _ctx.abrupt("return", {
-                      pageProps: pageProps
-                    });
-                  case 5:
-                  case "end":
-                    return _ctx.stop();
-                }
-            }, _callee);
-          })
-        );
+         */ _asyncToGenerator(function*({ Component, ctx }) {
+          const pageProps = yield (0, _utils).loadGetInitialProps(
+            Component,
+            ctx
+          );
+          return {
+            pageProps
+          };
+        });
         return _appGetInitialProps.apply(this, arguments);
       }
       var _Component;
-      var App = /*#__PURE__*/ (function(_superClass) {
-        _inherits(App, _superClass);
-        var _super = _create_super(App);
-        function App() {
-          _class_call_check(this, App);
-          return _super.apply(this, arguments);
+      class App extends (_Component = _react.default.Component) {
+        render() {
+          const { Component, pageProps } = this.props;
+          return /*#__PURE__*/ _react.default.createElement(
+            Component,
+            Object.assign({}, pageProps)
+          );
         }
-        _create_class(App, [
-          {
-            key: "render",
-            value: function render() {
-              var _props = this.props,
-                Component = _props.Component,
-                pageProps = _props.pageProps;
-              return /*#__PURE__*/ _react.default.createElement(
-                Component,
-                Object.assign({}, pageProps)
-              );
-            }
-          }
-        ]);
-        return App;
-      })((_Component = _react.default.Component));
+      }
       App.origGetInitialProps = appGetInitialProps;
       App.getInitialProps = appGetInitialProps;
       exports["default"] = App; //# sourceMappingURL=_app.js.map
@@ -179,7 +145,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(3479), __webpack_exec__(3668);
+      return __webpack_exec__(122), __webpack_exec__(7489);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for _error-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [820],
   {
-    /***/ 2929: /***/ function(
+    /***/ 3560: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(9103);
+          return __webpack_require__(2509);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(2929);
+      return __webpack_exec__(3560);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for amp-HASH.js
@@ -1,17 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [216],
   {
-    /***/ 94: /***/ function(
+    /***/ 7941: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2562);
+      module.exports = __webpack_require__(6824);
 
       /***/
     },
 
-    /***/ 9028: /***/ function(
+    /***/ 8958: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(6385);
+          return __webpack_require__(9302);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 2562: /***/ function(module, exports, __webpack_require__) {
+    /***/ 6824: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -36,8 +36,8 @@
       });
       exports.useAmp = useAmp;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _ampContext = __webpack_require__(2556);
-      var _ampMode = __webpack_require__(7853);
+      var _ampContext = __webpack_require__(5789);
+      var _ampMode = __webpack_require__(9208);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -66,7 +66,7 @@
       /***/
     },
 
-    /***/ 6385: /***/ function(
+    /***/ 9302: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -83,13 +83,13 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        94
+        7941
       );
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_amp__WEBPACK_IMPORTED_MODULE_0__
       );
 
-      var config = {
+      const config = {
         amp: "hybrid"
       };
       function Amp(props) {
@@ -107,7 +107,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(9028);
+      return __webpack_exec__(8958);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for css-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 8281: /***/ function(
+    /***/ 9557: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(4347);
+          return __webpack_require__(79);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4347: /***/ function(
+    /***/ 79: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,26 +29,27 @@
         4637
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        4542
+        2054
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
       );
 
-      var Page = function() {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-          className: _css_module_css__WEBPACK_IMPORTED_MODULE_1___default()
-            .helloWorld,
-          children: "Hello world \uD83D\uDC4B"
-        });
-      };
+      const Page = () =>
+        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+          "div",
+          {
+            className: _css_module_css__WEBPACK_IMPORTED_MODULE_1___default()
+              .helloWorld,
+            children: "Hello world \u{1F44B}"
+          }
+        );
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 4542: /***/ function(module) {
+    /***/ 2054: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
@@ -61,7 +62,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(8281);
+      return __webpack_exec__(9557);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for dynamic-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 2744: /***/ function(
+    /***/ 5695: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(5547);
+          return __webpack_require__(9525);
         }
       ]);
       if (false) {
@@ -18,25 +18,21 @@
       /***/
     },
 
-    /***/ 3005: /***/ function(module, exports, __webpack_require__) {
+    /***/ 6014: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      var _instanceof = __webpack_require__(186) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = dynamic;
       exports.noSSR = noSSR;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _loadable = _interopRequireDefault(__webpack_require__(9675));
+      var _loadable = _interopRequireDefault(__webpack_require__(7679));
       function dynamic(dynamicOptions, options) {
-        var loadableFn = _loadable.default;
-        var loadableOptions = {
+        let loadableFn = _loadable.default;
+        let loadableOptions = {
           // A loading component is not required, so we default it
-          loading: function(param) {
-            var error = param.error,
-              isLoading = param.isLoading,
-              pastDelay = param.pastDelay;
+          loading: ({ error, isLoading, pastDelay }) => {
             if (!pastDelay) return null;
             if (false) {
             }
@@ -47,10 +43,8 @@
         // Note that this is only kept for the edge case where someone is passing in a promise as first argument
         // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
         // To make sure we don't execute the import without rendering first
-        if (_instanceof(dynamicOptions, Promise)) {
-          loadableOptions.loader = function() {
-            return dynamicOptions;
-          };
+        if (dynamicOptions instanceof Promise) {
+          loadableOptions.loader = () => dynamicOptions;
           // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
         } else if (typeof dynamicOptions === "function") {
           loadableOptions.loader = dynamicOptions;
@@ -63,7 +57,7 @@
         // Error if Fizz rendering is not enabled and `suspense` option is set to true
         if (true && loadableOptions.suspense) {
           throw new Error(
-            "Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense"
+            `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
           );
         }
         // coming from build/babel/plugins/react-loadable-plugin.js
@@ -112,7 +106,7 @@
               default: obj
             };
       }
-      var isServerSide = "object" === "undefined";
+      const isServerSide = "object" === "undefined";
       function noSSR(LoadableInitializer, loadableOptions) {
         // Removing webpack and modules means react-loadable won't try preloading
         delete loadableOptions.webpack;
@@ -121,16 +115,15 @@
         if (!isServerSide) {
           return LoadableInitializer(loadableOptions);
         }
-        var Loading = loadableOptions.loading;
+        const Loading = loadableOptions.loading;
         // This will only be rendered on the server side
-        return function() {
-          return /*#__PURE__*/ _react.default.createElement(Loading, {
+        return () =>
+          /*#__PURE__*/ _react.default.createElement(Loading, {
             error: null,
             isLoading: true,
             pastDelay: false,
             timedOut: false
           });
-        };
       }
       if (
         (typeof exports.default === "function" ||
@@ -147,7 +140,7 @@
       /***/
     },
 
-    /***/ 577: /***/ function(
+    /***/ 8416: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -166,7 +159,7 @@
               default: obj
             };
       }
-      var LoadableContext = _react.default.createContext(null);
+      const LoadableContext = _react.default.createContext(null);
       exports.LoadableContext = LoadableContext;
       if (false) {
       } //# sourceMappingURL=loadable-context.js.map
@@ -174,21 +167,19 @@
       /***/
     },
 
-    /***/ 9675: /***/ function(
+    /***/ 7679: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
-      var _class_call_check = __webpack_require__(105) /* ["default"] */.Z;
-      var _create_class = __webpack_require__(3031) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _loadableContext = __webpack_require__(577);
+      var _loadableContext = __webpack_require__(8416);
       function _extends() {
         _extends =
           Object.assign ||
@@ -212,25 +203,24 @@
               default: obj
             };
       }
-      var useSyncExternalStore = (false ? 0 : __webpack_require__(9155))
-        .useSyncExternalStore;
-      var ALL_INITIALIZERS = [];
-      var READY_INITIALIZERS = [];
-      var initialized = false;
+      const { useSyncExternalStore } = false ? 0 : __webpack_require__(9155);
+      const ALL_INITIALIZERS = [];
+      const READY_INITIALIZERS = [];
+      let initialized = false;
       function load(loader) {
-        var promise = loader();
-        var state = {
+        let promise = loader();
+        let state = {
           loading: true,
           loaded: null,
           error: null
         };
         state.promise = promise
-          .then(function(loaded) {
+          .then(loaded => {
             state.loading = false;
             state.loaded = loaded;
             return loaded;
           })
-          .catch(function(err) {
+          .catch(err => {
             state.loading = false;
             state.error = err;
             throw err;
@@ -241,9 +231,25 @@
         return obj && obj.__esModule ? obj.default : obj;
       }
       function createLoadableComponent(loadFn, options) {
-        var init = function init() {
+        let opts = Object.assign(
+          {
+            loader: null,
+            loading: null,
+            delay: 200,
+            timeout: null,
+            webpack: null,
+            modules: null,
+            suspense: false
+          },
+          options
+        );
+        if (opts.suspense) {
+          opts.lazy = _react.default.lazy(opts.loader);
+        }
+        /** @type LoadableSubscription */ let subscription = null;
+        function init() {
           if (!subscription) {
-            var sub = new LoadableSubscription(loadFn, opts);
+            const sub = new LoadableSubscription(loadFn, opts);
             subscription = {
               getCurrentValue: sub.getCurrentValue.bind(sub),
               subscribe: sub.subscribe.bind(sub),
@@ -252,135 +258,152 @@
             };
           }
           return subscription.promise();
-        };
-        var useLoadableModule = function useLoadableModule() {
+        }
+        // Server only
+        if (false) {
+        }
+        // Client only
+        if (!initialized && "object" !== "undefined") {
+          // require.resolveWeak check is needed for environments that don't have it available like Jest
+          const moduleIds =
+            opts.webpack && "function" === "function"
+              ? opts.webpack()
+              : opts.modules;
+          if (moduleIds) {
+            READY_INITIALIZERS.push(ids => {
+              for (const moduleId of moduleIds) {
+                if (ids.indexOf(moduleId) !== -1) {
+                  return init();
+                }
+              }
+            });
+          }
+        }
+        function useLoadableModule() {
           init();
-          var context = _react.default.useContext(
+          const context = _react.default.useContext(
             _loadableContext.LoadableContext
           );
           if (context && Array.isArray(opts.modules)) {
-            opts.modules.forEach(function(moduleName) {
+            opts.modules.forEach(moduleName => {
               context(moduleName);
             });
           }
-        };
-        var LoadableImpl = function LoadableImpl(props, ref) {
+        }
+        function LoadableImpl(props, ref) {
           useLoadableModule();
-          var state = useSyncExternalStore(
+          const state = useSyncExternalStore(
             subscription.subscribe,
             subscription.getCurrentValue,
             subscription.getCurrentValue
           );
           _react.default.useImperativeHandle(
             ref,
-            function() {
-              return {
-                retry: subscription.retry
-              };
-            },
+            () => ({
+              retry: subscription.retry
+            }),
             []
           );
-          return _react.default.useMemo(
-            function() {
-              if (state.loading || state.error) {
-                return _react.default.createElement(opts.loading, {
-                  isLoading: state.loading,
-                  pastDelay: state.pastDelay,
-                  timedOut: state.timedOut,
-                  error: state.error,
-                  retry: subscription.retry
-                });
-              } else if (state.loaded) {
-                return _react.default.createElement(
-                  resolve(state.loaded),
-                  props
-                );
-              } else {
-                return null;
-              }
-            },
-            [props, state]
-          );
-        };
-        var LazyImpl = function LazyImpl(props, ref) {
+          return _react.default.useMemo(() => {
+            if (state.loading || state.error) {
+              return _react.default.createElement(opts.loading, {
+                isLoading: state.loading,
+                pastDelay: state.pastDelay,
+                timedOut: state.timedOut,
+                error: state.error,
+                retry: subscription.retry
+              });
+            } else if (state.loaded) {
+              return _react.default.createElement(resolve(state.loaded), props);
+            } else {
+              return null;
+            }
+          }, [props, state]);
+        }
+        function LazyImpl(props, ref) {
           useLoadableModule();
           return _react.default.createElement(
             opts.lazy,
             _extends({}, props, {
-              ref: ref
+              ref
             })
           );
-        };
-        var opts = Object.assign(
-          {
-            loader: null,
-            loading: null,
-            delay: 200,
-            timeout: null,
-            webpack: null,
-            modules: null,
-            suspense: false
-          },
-          options
-        );
-        if (opts.suspense) {
-          opts.lazy = _react.default.lazy(opts.loader);
         }
-        /** @type LoadableSubscription */ var subscription = null;
-        // Server only
-        if (false) {
+        const LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
+        LoadableComponent.preload = () => init();
+        LoadableComponent.displayName = "LoadableComponent";
+        return _react.default.forwardRef(LoadableComponent);
+      }
+      class LoadableSubscription {
+        promise() {
+          return this._res.promise;
         }
-        // Client only
-        if (!initialized && "object" !== "undefined") {
-          // require.resolveWeak check is needed for environments that don't have it available like Jest
-          var moduleIds =
-            opts.webpack && "function" === "function"
-              ? opts.webpack()
-              : opts.modules;
-          if (moduleIds) {
-            READY_INITIALIZERS.push(function(ids) {
-              var _iteratorNormalCompletion = true,
-                _didIteratorError = false,
-                _iteratorError = undefined;
-              try {
-                for (
-                  var _iterator = moduleIds[Symbol.iterator](), _step;
-                  !(_iteratorNormalCompletion = (_step = _iterator.next())
-                    .done);
-                  _iteratorNormalCompletion = true
-                ) {
-                  var moduleId = _step.value;
-                  if (ids.indexOf(moduleId) !== -1) {
-                    return init();
-                  }
-                }
-              } catch (err) {
-                _didIteratorError = true;
-                _iteratorError = err;
-              } finally {
-                try {
-                  if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                  }
-                } finally {
-                  if (_didIteratorError) {
-                    throw _iteratorError;
-                  }
-                }
+        retry() {
+          this._clearTimeouts();
+          this._res = this._loadFn(this._opts.loader);
+          this._state = {
+            pastDelay: false,
+            timedOut: false
+          };
+          const { _res: res, _opts: opts } = this;
+          if (res.loading) {
+            if (typeof opts.delay === "number") {
+              if (opts.delay === 0) {
+                this._state.pastDelay = true;
+              } else {
+                this._delay = setTimeout(() => {
+                  this._update({
+                    pastDelay: true
+                  });
+                }, opts.delay);
               }
-            });
+            }
+            if (typeof opts.timeout === "number") {
+              this._timeout = setTimeout(() => {
+                this._update({
+                  timedOut: true
+                });
+              }, opts.timeout);
+            }
           }
+          this._res.promise
+            .then(() => {
+              this._update({});
+              this._clearTimeouts();
+            })
+            .catch(_err => {
+              this._update({});
+              this._clearTimeouts();
+            });
+          this._update({});
         }
-        var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
-        LoadableComponent.preload = function() {
-          return init();
-        };
-        LoadableComponent.displayName = "LoadableComponent";
-        return _react.default.forwardRef(LoadableComponent);
-      }
-      var LoadableSubscription = /*#__PURE__*/ (function() {
-        function LoadableSubscription(loadFn, opts) {
-          _class_call_check(this, LoadableSubscription);
+        _update(partial) {
+          this._state = _extends(
+            {},
+            this._state,
+            {
+              error: this._res.error,
+              loaded: this._res.loaded,
+              loading: this._res.loading
+            },
+            partial
+          );
+          this._callbacks.forEach(callback => callback());
+        }
+        _clearTimeouts() {
+          clearTimeout(this._delay);
+          clearTimeout(this._timeout);
+        }
+        getCurrentValue() {
+          return this._state;
+        }
+        subscribe(callback) {
+          this._callbacks.add(callback);
+          return () => {
+            this._callbacks.delete(callback);
+          };
+        }
+        constructor(loadFn, opts) {
           this._loadFn = loadFn;
           this._opts = opts;
           this._callbacks = new Set();
@@ -388,129 +411,30 @@
           this._timeout = null;
           this.retry();
         }
-        _create_class(LoadableSubscription, [
-          {
-            key: "promise",
-            value: function promise() {
-              return this._res.promise;
-            }
-          },
-          {
-            key: "retry",
-            value: function retry() {
-              var _this = this;
-              this._clearTimeouts();
-              this._res = this._loadFn(this._opts.loader);
-              this._state = {
-                pastDelay: false,
-                timedOut: false
-              };
-              var ref = this,
-                res = ref._res,
-                opts = ref._opts;
-              if (res.loading) {
-                if (typeof opts.delay === "number") {
-                  if (opts.delay === 0) {
-                    this._state.pastDelay = true;
-                  } else {
-                    var _this1 = this;
-                    this._delay = setTimeout(function() {
-                      _this1._update({
-                        pastDelay: true
-                      });
-                    }, opts.delay);
-                  }
-                }
-                if (typeof opts.timeout === "number") {
-                  var _this2 = this;
-                  this._timeout = setTimeout(function() {
-                    _this2._update({
-                      timedOut: true
-                    });
-                  }, opts.timeout);
-                }
-              }
-              this._res.promise
-                .then(function() {
-                  _this._update({});
-                  _this._clearTimeouts();
-                })
-                .catch(function(_err) {
-                  _this._update({});
-                  _this._clearTimeouts();
-                });
-              this._update({});
-            }
-          },
-          {
-            key: "_update",
-            value: function _update(partial) {
-              this._state = _extends(
-                {},
-                this._state,
-                {
-                  error: this._res.error,
-                  loaded: this._res.loaded,
-                  loading: this._res.loading
-                },
-                partial
-              );
-              this._callbacks.forEach(function(callback) {
-                return callback();
-              });
-            }
-          },
-          {
-            key: "_clearTimeouts",
-            value: function _clearTimeouts() {
-              clearTimeout(this._delay);
-              clearTimeout(this._timeout);
-            }
-          },
-          {
-            key: "getCurrentValue",
-            value: function getCurrentValue() {
-              return this._state;
-            }
-          },
-          {
-            key: "subscribe",
-            value: function subscribe(callback) {
-              var _this = this;
-              this._callbacks.add(callback);
-              return function() {
-                _this._callbacks.delete(callback);
-              };
-            }
-          }
-        ]);
-        return LoadableSubscription;
-      })();
+      }
       function Loadable(opts) {
         return createLoadableComponent(load, opts);
       }
       function flushInitializers(initializers, ids) {
-        var promises = [];
+        let promises = [];
         while (initializers.length) {
-          var init = initializers.pop();
+          let init = initializers.pop();
           promises.push(init(ids));
         }
-        return Promise.all(promises).then(function() {
+        return Promise.all(promises).then(() => {
           if (initializers.length) {
             return flushInitializers(initializers, ids);
           }
         });
       }
-      Loadable.preloadAll = function() {
-        return new Promise(function(resolveInitializers, reject) {
+      Loadable.preloadAll = () => {
+        return new Promise((resolveInitializers, reject) => {
           flushInitializers(ALL_INITIALIZERS).then(resolveInitializers, reject);
         });
       };
-      Loadable.preloadReady = function() {
-        var ids =
-          arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-        return new Promise(function(resolvePreload) {
-          var res = function() {
+      Loadable.preloadReady = (ids = []) => {
+        return new Promise(resolvePreload => {
+          const res = () => {
             initialized = true;
             return resolvePreload();
           };
@@ -527,7 +451,7 @@
       /***/
     },
 
-    /***/ 5547: /***/ function(
+    /***/ 9525: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -544,29 +468,25 @@
         4637
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1605
+        2123
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_dynamic__WEBPACK_IMPORTED_MODULE_1__
       );
 
-      var DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
-        function() {
-          return __webpack_require__
-            .e(/* import() */ 299)
-            .then(__webpack_require__.bind(__webpack_require__, 5299));
-        },
+      const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
+        () =>
+          __webpack_require__
+            .e(/* import() */ 128)
+            .then(__webpack_require__.bind(__webpack_require__, 5128)),
         {
           loadableGenerated: {
-            webpack: function() {
-              return [/*require.resolve*/ 5299];
-            }
+            webpack: () => [/*require.resolve*/ 5128]
           }
         }
       );
-      var Page = function() {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+      const Page = () =>
+        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
           react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
           {
             children: [
@@ -582,19 +502,18 @@
             ]
           }
         );
-      };
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 1605: /***/ function(
+    /***/ 2123: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3005);
+      module.exports = __webpack_require__(6014);
 
       /***/
     },
@@ -696,7 +615,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(2744);
+      return __webpack_exec__(5695);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for head-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 4337: /***/ function(
+    /***/ 7148: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(9288);
+          return __webpack_require__(7481);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 9288: /***/ function(
+    /***/ 7481: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,15 +35,14 @@
         4637
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        8915
+        4616
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_head__WEBPACK_IMPORTED_MODULE_1__
       );
 
-      var Page = function() {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+      const Page = () =>
+        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
           react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
           {
             children: [
@@ -64,19 +63,18 @@
             ]
           }
         );
-      };
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 8915: /***/ function(
+    /***/ 4616: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(681);
+      module.exports = __webpack_require__(4790);
 
       /***/
     }
@@ -87,7 +85,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4337);
+      return __webpack_exec__(7148);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for hooks-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [757],
   {
-    /***/ 4853: /***/ function(
+    /***/ 3515: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(8892);
+          return __webpack_require__(9115);
         }
       ]);
       if (false) {
@@ -18,110 +18,61 @@
       /***/
     },
 
-    /***/ 8892: /***/ function(
+    /***/ 9115: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
     ) {
       "use strict";
-      // ESM COMPAT FLAG
       __webpack_require__.r(__webpack_exports__);
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+        4637
+      );
+      /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        9496
+      );
 
-      // EXPORTS
-      __webpack_require__.d(__webpack_exports__, {
-        default: function() {
-          return /* binding */ hooks;
-        }
-      }); // CONCATENATED MODULE: ./node_modules/.pnpm/@[email protected]/node_modules/@swc/helpers/src/_array_with_holes.mjs
-
-      function _arrayWithHoles(arr) {
-        if (Array.isArray(arr)) return arr;
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/@[email protected]/node_modules/@swc/helpers/src/_iterable_to_array.mjs
-
-      function _iterableToArray(iter) {
-        if (
-          (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
-          iter["@@iterator"] != null
-        )
-          return Array.from(iter);
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/@[email protected]/node_modules/@swc/helpers/src/_non_iterable_rest.mjs
-
-      function _nonIterableRest() {
-        throw new TypeError(
-          "Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
+      /* harmony default export */ __webpack_exports__["default"] = () => {
+        const [
+          clicks1,
+          setClicks1
+        ] = react__WEBPACK_IMPORTED_MODULE_1__.useState(0);
+        const { 0: clicks2, 1: setClicks2 } = (0,
+        react__WEBPACK_IMPORTED_MODULE_1__.useState)(0);
+        const doClick1 = react__WEBPACK_IMPORTED_MODULE_1__.useCallback(() => {
+          setClicks1(clicks1 + 1);
+        }, [clicks1]);
+        const doClick2 = (0,
+        react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {
+          setClicks2(clicks2 + 1);
+        }, [clicks2]);
+        return /*#__PURE__*/ (0,
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
+          {
+            children: [
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("h3", {
+                children: ["Clicks ", clicks1]
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
+                onClick: doClick1,
+                children: "Click me"
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("h3", {
+                children: ["Clicks ", clicks2]
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
+                onClick: doClick2,
+                children: "Click me"
+              })
+            ]
+          }
         );
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/@[email protected]/node_modules/@swc/helpers/src/_array_like_to_array.mjs
-
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-        return arr2;
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/@[email protected]/node_modules/@swc/helpers/src/_unsupported_iterable_to_array.mjs
-
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(n);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/@[email protected]/node_modules/@swc/helpers/src/_sliced_to_array.mjs
-
-      function _slicedToArray(arr, i) {
-        return (
-          _arrayWithHoles(arr) ||
-          _iterableToArray(arr, i) ||
-          _unsupportedIterableToArray(arr, i) ||
-          _nonIterableRest()
-        );
-      }
-
-      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
-      var jsx_runtime = __webpack_require__(4637);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/index.js
-      var react = __webpack_require__(9496); // CONCATENATED MODULE: ./pages/hooks.js
-      /* harmony default export */ function hooks() {
-        var ref = _slicedToArray(react.useState(0), 2),
-          clicks1 = ref[0],
-          setClicks1 = ref[1];
-        var ref1 = (0, react.useState)(0),
-          clicks2 = ref1[0],
-          setClicks2 = ref1[1];
-        var doClick1 = react.useCallback(
-          function() {
-            setClicks1(clicks1 + 1);
-          },
-          [clicks1]
-        );
-        var doClick2 = (0, react.useCallback)(
-          function() {
-            setClicks2(clicks2 + 1);
-          },
-          [clicks2]
-        );
-        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-          children: [
-            /*#__PURE__*/ (0, jsx_runtime.jsxs)("h3", {
-              children: ["Clicks ", clicks1]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime.jsx)("button", {
-              onClick: doClick1,
-              children: "Click me"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime.jsxs)("h3", {
-              children: ["Clicks ", clicks2]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime.jsx)("button", {
-              onClick: doClick2,
-              children: "Click me"
-            })
-          ]
-        });
-      }
+      };
 
       /***/
     }
@@ -132,7 +83,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4853);
+      return __webpack_exec__(3515);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for image-HASH.js

Diff too large to display

Diff for index-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 4786: /***/ function(
+    /***/ 6967: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(5355);
+          return __webpack_require__(3973);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/
Post job cleanup.
[command]/usr/bin/git version
git version 2.36.1
Temporarily overriding HOME='/home/runner/work/_temp/d68d4d5c-5769-4206-a679-5482d981b2a7' before making global git config changes
Adding repository directory to the temporary git global config as a safe directory
[command]/usr/bin/git config --global --add safe.directory /home/runner/work/next.js/next.js
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: 962a35967b9988862a553fbdc9f5168cf33cc64f

ijjk avatar Jul 05 '22 07:07 ijjk

@ijjk The reason the PR is created is the pre-compiled client codes are already targeting es2016. So no matter how a user/developer configures their browserlists, it is currently impossible for a Next.js site to be compatible with IE and Edge 12.

And it is also the limitation of the pre-compiling: either completely drop support for ES5 or ship ES5 code for modern sites

SukkaW avatar Aug 08 '22 17:08 SukkaW

The reason the PR is created is the pre-compiled client codes are already targeting es2016

The client files we transpile ahead of time should be reprocessed during build time to ensure it's matching our transpilation level there, x-ref: https://github.com/vercel/next.js/blob/9f8713fae416ad34e91f3f8069841ffa98aa3c11/packages/next/build/webpack-config.ts#L521-L526

Are we missing some client regexes there?

ijjk avatar Aug 08 '22 17:08 ijjk

The reason the PR is created is the pre-compiled client codes are already targeting es2016

The client files we transpile ahead of time should be reprocessed during build time to ensure it's matching our transpilation level there, x-ref:

https://github.com/vercel/next.js/blob/9f8713fae416ad34e91f3f8069841ffa98aa3c11/packages/next/build/webpack-config.ts#L521-L526

Are we missing some client regexes there?

That's pretty weird, as there is definitely something not working here. The https://nextjs.org is not working on IE 11 (Tested on a Windows Server 2008 with its built-in IE). The console logs an error Unknown syntax, which is a Generator syntax from router, which is transpiled from async/await.

I will dig into those webpack RegExps when I have time, to see if they really include every file used on the client side.

SukkaW avatar Aug 08 '22 17:08 SukkaW

Closing since this es5 target is only used when supportedBrowsers is undefined, which only happens when config.experimental.legacyBrowsers is true.

https://github.com/vercel/next.js/blob/cafbe2a0ade6375681224ff79799ececdbd821f2/packages/next/src/build/utils.ts#L1857-L1862

styfle avatar Jan 04 '23 19:01 styfle