Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable externalHelpers when pre compiling Next.js' code #37164

Merged
merged 4 commits into from
Jun 19, 2022

Conversation

SukkaW
Copy link
Contributor

@SukkaW SukkaW commented May 24, 2022

x-ref: swc-project/swc#4767
x-ref: #37142
x-ref #37150

  • Updates the @swc/core to 1.2.203
  • Enables externalHelpers for swc when compiling Next.js code (E.g., next/link, next/image, next/head, next/amp, next/dynamic, etc.)
    • externalHelpers is enabled for client-side and shared code.

packages/next/taskfile.js Outdated Show resolved Hide resolved
@SukkaW SukkaW marked this pull request as draft May 24, 2022 18:38
@SukkaW SukkaW changed the title chore(devDeps): upgrade @swc/core to 1.2.192 Enable externalHelpers when compiling Next.js' code May 24, 2022
@SukkaW SukkaW marked this pull request as ready for review June 1, 2022 05:56
@ijjk
Copy link
Member

ijjk commented Jun 1, 2022

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary SukkaW/next.js external-helper-build Change
buildDuration 25.6s 24.5s -1.1s
buildDurationCached 8.5s 8.4s -63ms
nodeModulesSize 1.85 GB 1.85 GB -102 kB
Page Load Tests Overall increase ✓
vercel/next.js canary SukkaW/next.js external-helper-build Change
/ failed reqs 0 0
/ total time (seconds) 6.295 6.298 0
/ avg req/sec 397.11 396.94 ⚠️ -0.17
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 3.158 3.08 -0.08
/error-in-render avg req/sec 791.52 811.57 +20.05
Client Bundles (main, webpack) Overall decrease ✓
vercel/next.js canary SukkaW/next.js external-helper-build Change
437.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 30.3 kB 29.9 kB -429 B
webpack-HASH.js gzip 1.53 kB 1.54 kB ⚠️ +4 B
Overall change 74.1 kB 73.6 kB -425 B
Legacy Client Bundles (polyfills)
vercel/next.js canary SukkaW/next.js external-helper-build 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 external-helper-build Change
_app-HASH.js gzip 827 B 691 B -136 B
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 495 B 492 B -3 B
css-HASH.js gzip 328 B 327 B -1 B
dynamic-HASH.js gzip 2.39 kB 2.36 kB -30 B
head-HASH.js gzip 359 B 355 B -4 B
hooks-HASH.js gzip 419 B 418 B -1 B
image-HASH.js gzip 5.54 kB 5.21 kB -328 B
index-HASH.js gzip 263 B 264 B ⚠️ +1 B
link-HASH.js gzip 2.4 kB 2.25 kB -145 B
routerDirect..HASH.js gzip 322 B 321 B -1 B
script-HASH.js gzip 392 B 390 B -2 B
withRouter-HASH.js gzip 320 B 318 B -2 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.4 kB 13.7 kB -652 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary SukkaW/next.js external-helper-build Change
_buildManifest.js gzip 459 B 460 B ⚠️ +1 B
Overall change 459 B 460 B ⚠️ +1 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary SukkaW/next.js external-helper-build Change
index.html gzip 523 B 522 B -1 B
link.html gzip 536 B 536 B
withRouter.html gzip 517 B 517 B
Overall change 1.58 kB 1.57 kB -1 B
Middleware size Overall decrease ✓
vercel/next.js canary SukkaW/next.js external-helper-build Change
middleware-m..st.json gzip 209 B 209 B
middleware.js gzip 17 kB 16.8 kB -132 B
edge-runtime..pack.js gzip 1.79 kB 1.79 kB
Overall change 19 kB 18.8 kB -132 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", {
@@ -85,11 +85,9 @@
       function getHostname(parsed, headers) {
         var ref;
         return (ref =
-          (!Array.isArray(
-            headers === null || headers === void 0 ? void 0 : headers.host
-          ) &&
-            (headers === null || headers === void 0 ? void 0 : headers.host)) ||
-          parsed.hostname) === null || ref === void 0
+          (!Array.isArray(headers == null ? void 0 : headers.host) &&
+            (headers == null ? void 0 : headers.host)) ||
+          parsed.hostname) == null
           ? void 0
           : ref.split(":")[0].toLowerCase();
       } //# sourceMappingURL=get-hostname.js.map
@@ -97,7 +95,7 @@
       /***/
     },
 
-    /***/ 893: /***/ (__unused_webpack_module, exports) => {
+    /***/ 936: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -114,13 +112,13 @@
             var ref, ref1;
             // remove port if present
             const domainHostname =
-              (ref = item.domain) === null || ref === void 0
+              (ref = item.domain) == null
                 ? void 0
                 : ref.split(":")[0].toLowerCase();
             if (
               hostname === domainHostname ||
               detectedLocale === item.defaultLocale.toLowerCase() ||
-              ((ref1 = item.locales) === null || ref1 === void 0
+              ((ref1 = item.locales) == null
                 ? void 0
                 : ref1.some(locale => locale.toLowerCase() === detectedLocale))
             ) {
@@ -135,7 +133,7 @@
       /***/
     },
 
-    /***/ 142: /***/ (__unused_webpack_module, exports) => {
+    /***/ 846: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -167,7 +165,7 @@
       /***/
     },
 
-    /***/ 777: /***/ (
+    /***/ 893: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -178,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 &&
@@ -199,7 +197,7 @@
       /***/
     },
 
-    /***/ 774: /***/ (
+    /***/ 466: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -210,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;
@@ -222,7 +220,7 @@
       /***/
     },
 
-    /***/ 114: /***/ (
+    /***/ 458: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -233,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;
@@ -245,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,
@@ -283,7 +285,7 @@
       /***/
     },
 
-    /***/ 763: /***/ (
+    /***/ 769: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -294,15 +296,13 @@
         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 } =
-          (_nextConfig = options.nextConfig) !== null && _nextConfig !== void 0
-            ? _nextConfig
-            : {};
+          (_nextConfig = options.nextConfig) != null ? _nextConfig : {};
         const info = {
           pathname: pathname,
           trailingSlash:
@@ -337,14 +337,10 @@
             info.pathname,
             i18n.locales
           );
-          info.locale =
-            pathLocale === null || pathLocale === void 0
-              ? void 0
-              : pathLocale.detectedLocale;
+          info.locale = pathLocale == null ? void 0 : pathLocale.detectedLocale;
           info.pathname =
-            (pathLocale === null || pathLocale === void 0
-              ? void 0
-              : pathLocale.pathname) || info.pathname;
+            (pathLocale == null ? void 0 : pathLocale.pathname) ||
+            info.pathname;
         }
         return info;
       } //# sourceMappingURL=get-next-pathname-info.js.map
@@ -352,7 +348,7 @@
       /***/
     },
 
-    /***/ 70: /***/ (__unused_webpack_module, exports) => {
+    /***/ 422: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -388,7 +384,7 @@
       /***/
     },
 
-    /***/ 841: /***/ (
+    /***/ 590: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -399,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;
@@ -411,7 +407,7 @@
       /***/
     },
 
-    /***/ 564: /***/ (__unused_webpack_module, exports) => {
+    /***/ 52: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -430,7 +426,7 @@
       /***/
     },
 
-    /***/ 565: /***/ (
+    /***/ 344: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -441,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);
@@ -455,7 +451,7 @@
       /***/
     },
 
-    /***/ 675: /***/ (__unused_webpack_module, exports) => {
+    /***/ 77: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -469,7 +465,7 @@
       /***/
     },
 
-    /***/ 748: /***/ module => {
+    /***/ 54: /***/ module => {
       var __dirname = "/";
       (() => {
         "use strict";
@@ -597,7 +593,7 @@
       /***/
     },
 
-    /***/ 491: /***/ (module, exports, __webpack_require__) => {
+    /***/ 826: /***/ (module, exports, __webpack_require__) => {
       var __dirname = "/";
       var __WEBPACK_AMD_DEFINE_RESULT__;
       (() => {
@@ -1439,11 +1435,7 @@
       /***/
     },
 
-    /***/ 222: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 35: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
       var __webpack_unused_export__;
 
@@ -1452,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,
@@ -1507,7 +1499,7 @@
          * an internal rewrite. Also we make sure the outgoing rewrite URL is
          * a data URL if the request was a data request.
          */ const rewrite =
-          response === null || response === void 0
+          response == null
             ? void 0
             : response.headers.get("x-middleware-rewrite");
         if (response && rewrite) {
@@ -1539,9 +1531,7 @@
          * default and we must also make sure the outgoing URL is a data one if
          * the incoming request was a data request.
          */ const redirect =
-          response === null || response === void 0
-            ? void 0
-            : response.headers.get("Location");
+          response == null ? void 0 : response.headers.get("Location");
         if (response && redirect) {
           const redirectURL = new _nextUrl.NextURL(redirect, {
             forceLocale: false,
@@ -1579,11 +1569,7 @@
       function blockUnallowedResponse(promise) {
         return promise.then(result => {
           var ref;
-          if (
-            (ref = result.response) === null || ref === void 0
-              ? void 0
-              : ref.body
-          ) {
+          if ((ref = result.response) == null ? void 0 : ref.body) {
             console.error(
               new Error(
                 `A middleware can not alter response's body. Learn more: https://nextjs.org/docs/messages/returning-response-body-in-middleware`
@@ -1627,7 +1613,7 @@
       /***/
     },
 
-    /***/ 626: /***/ (__unused_webpack_module, exports) => {
+    /***/ 182: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1668,7 +1654,7 @@
       /***/
     },
 
-    /***/ 685: /***/ (
+    /***/ 322: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1678,10 +1664,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) {
@@ -1697,10 +1683,7 @@
             options = opts || baseOrOpts || {};
           }
           this[Internal] = {
-            url: parseURL(
-              input,
-              base !== null && base !== void 0 ? base : options.base
-            ),
+            url: parseURL(input, base != null ? base : options.base),
             options: options,
             basePath: ""
           };
@@ -1717,9 +1700,9 @@
           );
           this[Internal].domainLocale = (0,
           _detectDomainLocale).detectDomainLocale(
-            (ref = this[Internal].options.nextConfig) === null || ref === void 0
+            (ref = this[Internal].options.nextConfig) == null
               ? void 0
-              : (ref1 = ref.i18n) === null || ref1 === void 0
+              : (ref1 = ref.i18n) == null
               ? void 0
               : ref1.domains,
             (0, _getHostname).getHostname(
@@ -1728,28 +1711,23 @@
             )
           );
           const defaultLocale =
-            ((ref2 = this[Internal].domainLocale) === null || ref2 === void 0
+            ((ref2 = this[Internal].domainLocale) == null
               ? void 0
               : ref2.defaultLocale) ||
-            ((ref3 = this[Internal].options.nextConfig) === null ||
-            ref3 === void 0
+            ((ref3 = this[Internal].options.nextConfig) == null
               ? void 0
-              : (ref4 = ref3.i18n) === null || ref4 === void 0
+              : (ref4 = ref3.i18n) == null
               ? void 0
               : ref4.defaultLocale);
           this[Internal].url.pathname = pathnameInfo.pathname;
           this[Internal].defaultLocale = defaultLocale;
           var _basePath;
           this[Internal].basePath =
-            (_basePath = pathnameInfo.basePath) !== null && _basePath !== void 0
-              ? _basePath
-              : "";
+            (_basePath = pathnameInfo.basePath) != null ? _basePath : "";
           this[Internal].buildId = pathnameInfo.buildId;
           var _locale;
           this[Internal].locale =
-            (_locale = pathnameInfo.locale) !== null && _locale !== void 0
-              ? _locale
-              : defaultLocale;
+            (_locale = pathnameInfo.locale) != null ? _locale : defaultLocale;
           this[Internal].trailingSlash = pathnameInfo.trailingSlash;
         }
         formatPathname() {
@@ -1772,19 +1750,15 @@
         }
         get locale() {
           var _locale;
-          return (_locale = this[Internal].locale) !== null &&
-            _locale !== void 0
-            ? _locale
-            : "";
+          return (_locale = this[Internal].locale) != null ? _locale : "";
         }
         set locale(locale) {
           var ref, ref5;
           if (
             !this[Internal].locale ||
-            !((ref = this[Internal].options.nextConfig) === null ||
-            ref === void 0
+            !((ref = this[Internal].options.nextConfig) == null
               ? void 0
-              : (ref5 = ref.i18n) === null || ref5 === void 0
+              : (ref5 = ref.i18n) == null
               ? void 0
               : ref5.locales.includes(locale))
           ) {
@@ -1914,7 +1888,7 @@
       /***/
     },
 
-    /***/ 508: /***/ (
+    /***/ 256: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1930,8 +1904,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
@@ -1985,78 +1959,76 @@
       class NextCookies extends Cookies {
         constructor(response) {
           super(response.headers.get("cookie"));
-          this.get = (...args) => {
-            return this.getWithOptions(...args).value;
-          };
-          this.getWithOptions = (...args) => {
-            const raw = super.get(...args);
-            if (typeof raw !== "string")
-              return {
-                value: raw,
-                options: {}
-              };
-            const { [args[0]]: value, ...options } = _cookie.default.parse(raw);
+          this.response = response;
+        }
+        get = (...args) => {
+          return this.getWithOptions(...args).value;
+        };
+        getWithOptions = (...args) => {
+          const raw = super.get(...args);
+          if (typeof raw !== "string")
             return {
-              value,
-              options
+              value: raw,
+              options: {}
             };
+          const { [args[0]]: value, ...options } = _cookie.default.parse(raw);
+          return {
+            value,
+            options
           };
-          this.set = (...args) => {
-            const isAlreadyAdded = super.has(args[0]);
-            super.set(...args);
-            const currentCookie = super.get(args[0]);
-            if (typeof currentCookie !== "string") {
-              throw new Error(
-                `Invariant: failed to generate cookie for ${JSON.stringify(
-                  args
-                )}`
-              );
-            }
-            if (isAlreadyAdded) {
-              const setCookie = serializeCookie(
-                deserializeCookie(this.response).filter(
-                  value => !value.startsWith(`${args[0]}=`)
-                )
-              );
-              if (setCookie) {
-                this.response.headers.set(
-                  "set-cookie",
-                  [currentCookie, setCookie].join(", ")
-                );
-              } else {
-                this.response.headers.set("set-cookie", currentCookie);
-              }
-            } else {
-              this.response.headers.append("set-cookie", currentCookie);
-            }
-            return this;
-          };
-          this.delete = (key, options = {}) => {
-            const isDeleted = super.delete(key);
-            if (isDeleted) {
-              const setCookie = serializeCookie(
-                deserializeCookie(this.response).filter(
-                  value => !value.startsWith(`${key}=`)
-                )
-              );
-              const expiredCookie = serializeExpiredCookie(key, options);
+        };
+        set = (...args) => {
+          const isAlreadyAdded = super.has(args[0]);
+          super.set(...args);
+          const currentCookie = super.get(args[0]);
+          if (typeof currentCookie !== "string") {
+            throw new Error(
+              `Invariant: failed to generate cookie for ${JSON.stringify(args)}`
+            );
+          }
+          if (isAlreadyAdded) {
+            const setCookie = serializeCookie(
+              deserializeCookie(this.response).filter(
+                value => !value.startsWith(`${args[0]}=`)
+              )
+            );
+            if (setCookie) {
               this.response.headers.set(
                 "set-cookie",
-                [expiredCookie, setCookie].join(", ")
+                [currentCookie, setCookie].join(", ")
               );
+            } else {
+              this.response.headers.set("set-cookie", currentCookie);
             }
-            return isDeleted;
-          };
-          this.clear = (options = {}) => {
-            const expiredCookies = Array.from(super.keys())
-              .map(key => serializeExpiredCookie(key, options))
-              .join(", ");
-            if (expiredCookies)
-              this.response.headers.set("set-cookie", expiredCookies);
-            return super.clear();
-          };
-          this.response = response;
-        }
+          } else {
+            this.response.headers.append("set-cookie", currentCookie);
+          }
+          return this;
+        };
+        delete = (key, options = {}) => {
+          const isDeleted = super.delete(key);
+          if (isDeleted) {
+            const setCookie = serializeCookie(
+              deserializeCookie(this.response).filter(
+                value => !value.startsWith(`${key}=`)
+              )
+            );
+            const expiredCookie = serializeExpiredCookie(key, options);
+            this.response.headers.set(
+              "set-cookie",
+              [expiredCookie, setCookie].join(", ")
+            );
+          }
+          return isDeleted;
+        };
+        clear = (options = {}) => {
+          const expiredCookies = Array.from(super.keys())
+            .map(key => serializeExpiredCookie(key, options))
+            .join(", ");
+          if (expiredCookies)
+            this.response.headers.set("set-cookie", expiredCookies);
+          return super.clear();
+        };
       }
       exports.NextCookies = NextCookies;
 
@@ -2065,7 +2037,7 @@
       /***/
     },
 
-    /***/ 575: /***/ (
+    /***/ 339: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2076,18 +2048,16 @@
         value: true
       });
       exports.waitUntilSymbol = void 0;
-      var _error = __webpack_require__(626);
-      var _key, _key1;
+      var _error = __webpack_require__(182);
       const responseSymbol = Symbol("response");
       const passThroughSymbol = Symbol("passThrough");
       const waitUntilSymbol = Symbol("waitUntil");
       exports.waitUntilSymbol = waitUntilSymbol;
       class FetchEvent {
+        [waitUntilSymbol] = [];
+        [passThroughSymbol] = false;
         // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-        constructor(_request) {
-          this[_key] = [];
-          this[_key1] = false;
-        }
+        constructor(_request) {}
         respondWith(response) {
           if (!this[responseSymbol]) {
             this[responseSymbol] = Promise.resolve(response);
@@ -2100,8 +2070,6 @@
           this[waitUntilSymbol].push(promise);
         }
       }
-      _key = waitUntilSymbol;
-      _key1 = passThroughSymbol;
       class NextFetchEvent extends FetchEvent {
         constructor(params) {
           super(params.request);
@@ -2133,21 +2101,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 {
@@ -2194,7 +2158,7 @@
       /***/
     },
 
-    /***/ 690: /***/ (
+    /***/ 367: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2204,9 +2168,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 {
@@ -2270,7 +2234,7 @@
       /***/
     },
 
-    /***/ 240: /***/ (
+    /***/ 932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2284,7 +2248,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
@@ -2312,7 +2276,7 @@
       /***/
     },
 
-    /***/ 229: /***/ (__unused_webpack_module, exports) => {
+    /***/ 880: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2324,7 +2288,7 @@
       /***/
     },
 
-    /***/ 20: /***/ (__unused_webpack_module, exports) => {
+    /***/ 93: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2439,17 +2403,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
       };
 
       /***/
@@ -2459,7 +2423,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-5d085461d4b7e1ee.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-48e41d26ff0101f8.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-6515d1b91fe9c7da.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-71b39a0d29d24c94.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-f7a25bc135f661fc.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-6a98f1e7edec8d7d.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-6d59dba2fd31bfed.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-a95e3bc2c5ca8245.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-149bb8e9114142f1.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-fa8440b6e45b7897.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-6ece0649d14938b8.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ca038552a2ac93a8.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-c9e441c53074493e.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-6511e00fa79cd72c.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-e2b7857f2aa86120.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-5675b3cac226c365.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-bea7bd156f61421f.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7b3094b74831546d.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-9669d5861da5e10b.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-c2408dd9a1984376.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-c439c95569fb9033.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-f309dfc4eea310f4.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-8b03818d0ed540a0.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-fb06f1f34bce84ca.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__(3653);
+          return __webpack_require__(539);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3653: /***/ function(
+    /***/ 539: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -31,7 +31,7 @@
       var _interop_require_default = __webpack_require__(4648) /* ["default"] */
         .Z;
       var _create_super = __webpack_require__(9504) /* ["default"] */.Z;
-      var _runtimeJs = _interop_require_default(__webpack_require__(739));
+      var _runtimeJs = _interop_require_default(__webpack_require__(3994));
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -48,69 +48,12 @@
         }
       });
       exports["default"] = void 0;
-      var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _utils = __webpack_require__(8030);
-      function asyncGeneratorStep(
-        gen,
-        resolve,
-        reject,
-        _next,
-        _throw,
-        key,
-        arg
-      ) {
-        try {
-          var info = gen[key](arg);
-          var value = info.value;
-        } catch (error) {
-          reject(error);
-          return;
-        }
-        if (info.done) {
-          resolve(value);
-        } else {
-          Promise.resolve(value).then(_next, _throw);
-        }
-      }
-      function _asyncToGenerator(fn) {
-        return function() {
-          var self = this,
-            args = arguments;
-          return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-              asyncGeneratorStep(
-                gen,
-                resolve,
-                reject,
-                _next,
-                _throw,
-                "next",
-                value
-              );
-            }
-            function _throw(err) {
-              asyncGeneratorStep(
-                gen,
-                resolve,
-                reject,
-                _next,
-                _throw,
-                "throw",
-                err
-              );
-            }
-            _next(undefined);
-          });
-        };
-      }
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
+      var _async_to_generator = __webpack_require__(6362) /* ["default"] */.Z;
+      var _interop_require_default1 = __webpack_require__(
+        4648
+      ) /* ["default"] */.Z;
+      var _react = _interop_require_default1(__webpack_require__(9496));
+      var _utils = __webpack_require__(9089);
       function appGetInitialProps(_) {
         return _appGetInitialProps.apply(this, arguments);
       }
@@ -118,7 +61,7 @@
         _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(
+         */ _async_to_generator(
           _runtimeJs.default.mark(function _callee(param) {
             var Component, ctx, pageProps;
             return _runtimeJs.default.wrap(function _callee$(_ctx) {
@@ -142,8 +85,9 @@
         );
         return _appGetInitialProps.apply(this, arguments);
       }
-      var App = /*#__PURE__*/ (function(_Component) {
-        _inherits(App, _Component);
+      var _Component;
+      var App = /*#__PURE__*/ (function(_superClass) {
+        _inherits(App, _superClass);
         var _super = _create_super(App);
         function App() {
           _class_call_check(this, App);
@@ -164,10 +108,10 @@
           }
         ]);
         return App;
-      })(_react.default.Component);
-      exports["default"] = App;
+      })((_Component = _react.default.Component));
       App.origGetInitialProps = appGetInitialProps;
-      App.getInitialProps = appGetInitialProps; //# sourceMappingURL=_app.js.map
+      App.getInitialProps = appGetInitialProps;
+      exports["default"] = App; //# sourceMappingURL=_app.js.map
 
       /***/
     }
@@ -178,7 +122,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(3479), __webpack_exec__(7465);
+      return __webpack_exec__(122), __webpack_exec__(1905);
     });
     /******/ 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__(5590);
+          return __webpack_require__(9733);
         }
       ]);
       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__(4634);
+      module.exports = __webpack_require__(79);
 
       /***/
     },
 
-    /***/ 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__(4628);
+          return __webpack_require__(6534);
         }
       ]);
       if (false) {
@@ -28,23 +28,18 @@
       /***/
     },
 
-    /***/ 4634: /***/ function(module, exports, __webpack_require__) {
+    /***/ 79: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.useAmp = useAmp;
-      var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _ampContext = __webpack_require__(2054);
-      var _ampMode = __webpack_require__(1122);
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
+      var _interop_require_default = __webpack_require__(4648) /* ["default"] */
+        .Z;
+      var _react = _interop_require_default(__webpack_require__(9496));
+      var _ampContext = __webpack_require__(3131);
+      var _ampMode = __webpack_require__(868);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampMode).isInAmpMode(
@@ -66,7 +61,7 @@
       /***/
     },
 
-    /***/ 4628: /***/ function(
+    /***/ 6534: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -83,7 +78,7 @@
         /* 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__
@@ -107,7 +102,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__(1949);
+          return __webpack_require__(4173);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1949: /***/ function(
+    /***/ 4173: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,7 +29,7 @@
         4637
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1099
+        2467
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 1099: /***/ function(module) {
+    /***/ 2467: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
@@ -61,7 +61,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__(1697);
+          return __webpack_require__(7800);
         }
       ]);
       if (false) {
@@ -18,18 +18,20 @@
       /***/
     },
 
-    /***/ 1926: /***/ function(module, exports, __webpack_require__) {
+    /***/ 7164: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       var _instanceof = __webpack_require__(3354) /* ["default"] */.Z;
-      var _object_spread = __webpack_require__(7184) /* ["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__(4596));
+      var _extends = __webpack_require__(2987) /* ["default"] */.Z;
+      var _interop_require_default = __webpack_require__(4648) /* ["default"] */
+        .Z;
+      var _react = _interop_require_default(__webpack_require__(9496));
+      var _loadable = _interop_require_default(__webpack_require__(4398));
       function dynamic(dynamicOptions, options) {
         var loadableFn = _loadable.default;
         var loadableOptions = {
@@ -57,10 +59,10 @@
           loadableOptions.loader = dynamicOptions;
           // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
         } else if (typeof dynamicOptions === "object") {
-          loadableOptions = _object_spread({}, loadableOptions, dynamicOptions);
+          loadableOptions = _extends({}, loadableOptions, dynamicOptions);
         }
         // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
-        loadableOptions = _object_spread({}, loadableOptions, options);
+        loadableOptions = _extends({}, loadableOptions, options);
         // Error if Fizz rendering is not enabled and `suspense` option is set to true
         if (true && loadableOptions.suspense) {
           throw new Error(
@@ -69,7 +71,7 @@
         }
         // coming from build/babel/plugins/react-loadable-plugin.js
         if (loadableOptions.loadableGenerated) {
-          loadableOptions = _object_spread(
+          loadableOptions = _extends(
             {},
             loadableOptions,
             loadableOptions.loadableGenerated
@@ -90,13 +92,6 @@
         }
         return loadableFn(loadableOptions);
       }
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
       var isServerSide = "object" === "undefined";
       function noSSR(LoadableInitializer, loadableOptions) {
         // Removing webpack and modules means react-loadable won't try preloading
@@ -132,7 +127,7 @@
       /***/
     },
 
-    /***/ 7063: /***/ function(
+    /***/ 7484: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -143,14 +138,9 @@
         value: true
       });
       exports.LoadableContext = void 0;
-      var _react = _interopRequireDefault(__webpack_require__(9496));
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
+      var _interop_require_default = __webpack_require__(4648) /* ["default"] */
+        .Z;
+      var _react = _interop_require_default(__webpack_require__(9496));
       var LoadableContext = _react.default.createContext(null);
       exports.LoadableContext = LoadableContext;
       if (false) {
@@ -159,7 +149,7 @@
       /***/
     },
 
-    /***/ 4596: /***/ function(
+    /***/ 4398: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -168,20 +158,15 @@
 
       var _class_call_check = __webpack_require__(4037) /* ["default"] */.Z;
       var _create_class = __webpack_require__(2859) /* ["default"] */.Z;
-      var _object_spread = __webpack_require__(7184) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = void 0;
-      var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _loadableContext = __webpack_require__(7063);
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
+      var _extends = __webpack_require__(2987) /* ["default"] */.Z;
+      var _interop_require_default = __webpack_require__(4648) /* ["default"] */
+        .Z;
+      var _react = _interop_require_default(__webpack_require__(9496));
+      var _loadableContext = __webpack_require__(7484);
       var useSyncExternalStore = (false ? 0 : __webpack_require__(9155))
         .useSyncExternalStore;
       var ALL_INITIALIZERS = [];
@@ -276,7 +261,7 @@
           useLoadableModule();
           return _react.default.createElement(
             opts.lazy,
-            _object_spread({}, props, {
+            _extends({}, props, {
               ref: ref
             })
           );
@@ -415,7 +400,7 @@
           {
             key: "_update",
             value: function _update(partial) {
-              this._state = _object_spread(
+              this._state = _extends(
                 {},
                 this._state,
                 {
@@ -497,7 +482,7 @@
       /***/
     },
 
-    /***/ 1697: /***/ function(
+    /***/ 7800: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -514,7 +499,7 @@
         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__
@@ -523,13 +508,13 @@
       var DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         function() {
           return __webpack_require__
-            .e(/* import() */ 437)
-            .then(__webpack_require__.bind(__webpack_require__, 7437));
+            .e(/* import() */ 181)
+            .then(__webpack_require__.bind(__webpack_require__, 1181));
         },
         {
           loadableGenerated: {
             webpack: function() {
-              return [/*require.resolve*/ 7437];
+              return [/*require.resolve*/ 1181];
             }
           }
         }
@@ -559,12 +544,12 @@
       /***/
     },
 
-    /***/ 1605: /***/ function(
+    /***/ 2123: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(1926);
+      module.exports = __webpack_require__(7164);
 
       /***/
     },
@@ -666,7 +651,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__(848);
+          return __webpack_require__(6179);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 848: /***/ function(
+    /***/ 6179: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         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__
@@ -71,12 +71,12 @@
       /***/
     },
 
-    /***/ 8915: /***/ function(
+    /***/ 4616: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4828);
+      module.exports = __webpack_require__(5222);
 
       /***/
     }
@@ -87,7 +87,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__(7084);
+          return __webpack_require__(856);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7084: /***/ function(
+    /***/ 856: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -101,7 +101,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
@@ -1,7 +1,32 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 7570: /***/ function(
+    /***/ 8806: /***/ function(__unused_webpack_module, exports) {
+      "use strict";
+      var __webpack_unused_export__;
+
+      __webpack_unused_export__ = {
+        value: true
+      };
+      exports.Z = _defineProperty;
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+        return obj;
+      }
+
+      /***/
+    },
+
+    /***/ 1487: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +34,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3918);
+          return __webpack_require__(2330);
         }
       ]);
       if (false) {
@@ -18,23 +43,32 @@
       /***/
     },
 
-    /***/ 2185: /***/ function(module, exports, __webpack_require__) {
+    /***/ 5239: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      var _define_property = __webpack_require__(8806)["default"];
+      var _define_property = __webpack_require__(8806) /* ["default"] */.Z;
       var _sliced_to_array = __webpack_require__(9574) /* ["default"] */.Z;
       var _to_consumable_array = __webpack_require__(6686) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = Image;
-      var _react = _interopRequireWildcard(__webpack_require__(9496));
-      var _head = _interopRequireDefault(__webpack_require__(4828));
-      var _imageConfig = __webpack_require__(2204);
-      var _useIntersection = __webpack_require__(6363);
-      var _imageConfigContext = __webpack_require__(1958);
-      var _utils = __webpack_require__(8030);
-      var _normalizeTrailingSlash = __webpack_require__(1872);
+      var _extends = __webpack_require__(2987) /* ["default"] */.Z;
+      var _interop_require_default = __webpack_require__(4648) /* ["default"] */
+        .Z;
+      var _interop_require_wildcard = __webpack_require__(
+        4171
+      ) /* ["default"] */.Z;
+      var _object_without_properties_loose = __webpack_require__(
+        5232
+      ) /* ["default"] */.Z;
+      var _react = _interop_require_wildcard(__webpack_require__(9496));
+      var _head = _interop_require_default(__webpack_require__(5222));
+      var _imageConfig = __webpack_require__(5466);
+      var _useIntersection = __webpack_require__(1311);
+      var _imageConfigContext = __webpack_require__(1801);
+      var _utils = __webpack_require__(9089);
+      var _normalizeTrailingSlash = __webpack_require__(2800);
       function Image(_param) {
         var src = _param.src,
           sizes = _param.sizes,
@@ -57,7 +91,7 @@
           _placeholder = _param.placeholder,
           placeholder = _placeholder === void 0 ? "empty" : _placeholder,
           blurDataURL = _param.blurDataURL,
-          all = _objectWithoutProperties(_param, [
+          all = _object_without_properties_loose(_param, [
             "src",
             "sizes",
             "unoptimized",
@@ -91,7 +125,7 @@
             var deviceSizes = c.deviceSizes.sort(function(a, b) {
               return a - b;
             });
-            return _objectSpread({}, c, {
+            return _extends({}, c, {
               allSizes: allSizes,
               deviceSizes: deviceSizes
             });
@@ -113,7 +147,7 @@
             var _tmp;
             (_tmp = function(obj) {
               var _ = obj.config,
-                opts = _objectWithoutProperties(obj, ["config"]);
+                opts = _object_without_properties_loose(obj, ["config"]);
               // The config object is internal only so we must
               // not pass it to the user-defined loader()
               return customImageLoader(opts);
@@ -244,13 +278,13 @@
           .concat(blurDataURL, "'%3E%3C/image%3E%3C/svg%3E\");");
         var blurStyle =
           placeholder === "blur" && !blurComplete
-            ? _objectSpread(
+            ? _extends(
                 {
                   backgroundSize: objectFit || "cover",
                   backgroundPosition: objectPosition || "0% 0%"
                 },
                 layout === "raw" &&
-                  (blurDataURL === null || blurDataURL === void 0
+                  (blurDataURL == null
                     ? void 0
                     : blurDataURL.startsWith("data:image"))
                   ? {
@@ -356,7 +390,7 @@
           },
           [resetIntersected, src]
         );
-        var imgElementArgs = _objectSpread(
+        var imgElementArgs = _extends(
           {
             isLazy: isLazy,
             imgAttributes: imgAttributes,
@@ -452,100 +486,6 @@
             : null
         );
       }
-      function _defineProperty(obj, key, value) {
-        if (key in obj) {
-          Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-          });
-        } else {
-          obj[key] = value;
-        }
-        return obj;
-      }
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
-      function _interopRequireWildcard(obj) {
-        if (obj && obj.__esModule) {
-          return obj;
-        } else {
-          var newObj = {};
-          if (obj != null) {
-            for (var key in obj) {
-              if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                var desc =
-                  Object.defineProperty && Object.getOwnPropertyDescriptor
-                    ? Object.getOwnPropertyDescriptor(obj, key)
-                    : {};
-                if (desc.get || desc.set) {
-                  Object.defineProperty(newObj, key, desc);
-                } else {
-                  newObj[key] = obj[key];
-                }
-              }
-            }
-          }
-          newObj.default = obj;
-          return newObj;
-        }
-      }
-      function _objectSpread(target) {
-        var _arguments = arguments,
-          _loop = function(i) {
-            var source = _arguments[i] != null ? _arguments[i] : {};
-            var ownKeys = Object.keys(source);
-            if (typeof Object.getOwnPropertySymbols === "function") {
-              ownKeys = ownKeys.concat(
-                Object.getOwnPropertySymbols(source).filter(function(sym) {
-                  return Object.getOwnPropertyDescriptor(
-                    source,
-                    sym
-                  ).enumerable;
-                })
-              );
-            }
-            ownKeys.forEach(function(key) {
-              _defineProperty(target, key, source[key]);
-            });
-          };
-        for (var i = 1; i < arguments.length; i++) _loop(i);
-        return target;
-      }
-      function _objectWithoutProperties(source, excluded) {
-        if (source == null) return {};
-        var target = _objectWithoutPropertiesLoose(source, excluded);
-        var key, i;
-        if (Object.getOwnPropertySymbols) {
-          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-          for (i = 0; i < sourceSymbolKeys.length; i++) {
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key))
-              continue;
-            target[key] = source[key];
-          }
-        }
-        return target;
-      }
-      function _objectWithoutPropertiesLoose(source, excluded) {
-        if (source == null) return {};
-        var target = {};
-        var sourceKeys = Object.keys(source);
-        var key, i;
-        for (i = 0; i < sourceKeys.length; i++) {
-          key = sourceKeys[i];
-          if (excluded.indexOf(key) >= 0) continue;
-          target[key] = source[key];
-        }
-        return target;
-      }
       var ref =
           {
             deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -737,9 +677,8 @@
       function defaultImageLoader(loaderProps) {
         var ref5;
         var loaderKey =
-          ((ref5 = loaderProps.config) === null || ref5 === void 0
-            ? void 0
-            : ref5.loader) || "default";
+          ((ref5 = loaderProps.config) == null ? void 0 : ref5.loader) ||
+          "default";
         var load = loaders.get(loaderKey);
         if (load) {
           return load(loaderProps);
@@ -783,9 +722,7 @@
             setBlurComplete(true);
           }
           if (
-            onLoadingCompleteRef === null || onLoadingCompleteRef === void 0
-              ? void 0
-              : onLoadingCompleteRef.current
+            onLoadingCompleteRef == null ? void 0 : onLoadingCompleteRef.current
           ) {
             var naturalWidth = img.naturalWidth,
               naturalHeight = img.naturalHeight;
@@ -824,7 +761,7 @@
           onError = _param.onError,
           isVisible = _param.isVisible,
           noscriptSizes = _param.noscriptSizes,
-          rest = _objectWithoutProperties(_param, [
+          rest = _object_without_properties_loose(_param, [
             "imgAttributes",
             "heightInt",
             "widthInt",
@@ -870,13 +807,11 @@
                 className: className,
                 // @ts-ignore - TODO: upgrade to `@types/react@17`
                 loading: layout === "raw" ? loading : undefined,
-                style: _objectSpread({}, imgStyle, blurStyle),
+                style: _extends({}, imgStyle, blurStyle),
                 ref: (0, _react).useCallback(
                   function(img) {
                     setIntersection(img);
-                    if (
-                      img === null || img === void 0 ? void 0 : img.complete
-                    ) {
+                    if (img == null ? void 0 : img.complete) {
                       handleLoading(
                         img,
                         srcString,
@@ -1052,7 +987,7 @@
       /***/
  
Post job cleanup.
[command]/usr/bin/git version
git version 2.36.1
Temporarily overriding HOME='/home/runner/work/_temp/1aae7dee-6ee4-4019-84e5-95bf401292ab' 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: 90f359dcc7ebf05b5c05face0470c1fcf7d541b3

@ijjk
Copy link
Member

ijjk commented Jun 1, 2022

Failing test suites

Commit: 90f359d

pnpm testheadless test/integration/i18n-support-fallback-rewrite/test/index.test.js

  • i18n Support > dev mode > should not rewrite for index page
Expand output

● i18n Support › dev mode › should not rewrite for index page

expect(received).toEqual(expected) // deep equality

- Expected  - 3
+ Received  + 1

  Object {
    "asPath": "/?hello=world",
    "index": true,
    "pathname": "/",
-   "query": Object {
-     "hello": "world",
-   },
+   "query": Object {},
  }

  32 |       const browser = await webdriver(appPort, asPath)
  33 |
> 34 |       expect(JSON.parse(await browser.elementByCss('#router').text())).toEqual({
     |                                                                        ^
  35 |         index: true,
  36 |         pathname: '/',
  37 |         asPath: url.format({ pathname: '/', query }),

  at Object.<anonymous> (integration/i18n-support-fallback-rewrite/test/index.test.js:34:72)

Read more about building and testing Next.js in contributing.md.

pnpm testheadless test/integration/i18n-support-fallback-rewrite-legacy/test/index.test.js

  • i18n Support > dev mode > should not rewrite for index page
Expand output

● i18n Support › dev mode › should not rewrite for index page

expect(received).toEqual(expected) // deep equality

- Expected  - 3
+ Received  + 1

  Object {
    "asPath": "/?hello=world",
    "index": true,
    "pathname": "/",
-   "query": Object {
-     "hello": "world",
-   },
+   "query": Object {},
  }

  32 |       const browser = await webdriver(appPort, asPath)
  33 |
> 34 |       expect(JSON.parse(await browser.elementByCss('#router').text())).toEqual({
     |                                                                        ^
  35 |         index: true,
  36 |         pathname: '/',
  37 |         asPath: url.format({ pathname: '/', query }),

  at Object.<anonymous> (integration/i18n-support-fallback-rewrite-legacy/test/index.test.js:34:72)

Read more about building and testing Next.js in contributing.md.

@SukkaW SukkaW marked this pull request as draft June 8, 2022 03:10
@SukkaW SukkaW marked this pull request as ready for review June 8, 2022 03:44
@SukkaW
Copy link
Contributor Author

SukkaW commented Jun 8, 2022

That's really weird. Even though I have updated the @swc/core to 1.2.197 (specified in the package.json), pnpm still installs 1.2.148. @zkochan Do you have any clue about this behavior?

@zkochan
Copy link
Contributor

zkochan commented Jun 8, 2022

Maybe try pnpm update -r @swc/core

@SukkaW
Copy link
Contributor Author

SukkaW commented Jun 8, 2022

Maybe try pnpm update -r @swc/core

@zkochan Thanks for your reply!

I have been using the following command:

pnpm add @swc/core@1.2.197 -D -w

Then I execute pnpm why @swc/core and here is the result:

Legend: production dependency, optional only, dev only

nextjs-project@0.0.0 /Users/sukka/[Redacted]/next.js

devDependencies:
@swc/cli 0.1.55
└── @swc/core 1.2.148 peer
@swc/core 1.2.148
webpack 5.73.0
└─┬ terser-webpack-plugin 5.2.4
  └── @swc/core 1.2.148 peer
worker-loader 3.0.7
└─┬ webpack 5.73.0 peer
  └─┬ terser-webpack-plugin 5.2.4
    └── @swc/core 1.2.148 peer

Shouldn't it be like this?

Legend: production dependency, optional only, dev only

nextjs-project@0.0.0 /Users/sukka/[Redacted]/next.js

devDependencies:
@swc/cli 0.1.55
└── @swc/core 1.2.148 peer
- @swc/core 1.2.148
+ @swc/core 1.2.197
webpack 5.73.0
└─┬ terser-webpack-plugin 5.2.4
  └── @swc/core 1.2.148 peer
worker-loader 3.0.7
└─┬ webpack 5.73.0 peer
  └─┬ terser-webpack-plugin 5.2.4
    └── @swc/core 1.2.148 peer

Just tried pnpm update -r @swc/core. It still doesn't work, and pnpm why @swc/core output is still the same.


Update

I have to add @swc/core to the devDeps of the packages/next in order to use the latest version of @swc/core.

@SukkaW SukkaW force-pushed the external-helper-build branch 2 times, most recently from 607bfe4 to 098c91b Compare June 11, 2022 06:13
@SukkaW
Copy link
Contributor Author

SukkaW commented Jun 11, 2022

@ijjk

The PR is ready for review now.

The nodeModulesSize is reduced by 101 KiB, and the size of the main bundle (after gzipped) is reduced by 432 Bytes.

@zkochan
Copy link
Contributor

zkochan commented Jun 12, 2022

I see, looks like it happens when @swc/core is an auto installed peer dependency. We'll have to look into it.

@SukkaW SukkaW force-pushed the external-helper-build branch 2 times, most recently from 2efd888 to 5ffac43 Compare June 15, 2022 08:37
@SukkaW SukkaW closed this Jun 16, 2022
@SukkaW SukkaW reopened this Jun 16, 2022
@SukkaW SukkaW changed the title Enable externalHelpers when compiling Next.js' code Enable externalHelpers when pre compiling Next.js' code Jun 18, 2022
const swcClientOptions = {
module: {
type: 'commonjs',
ignoreDynamic: true,
},
jsc: {
loose: true,

externalHelpers: true,
Copy link
Member

@ijjk ijjk Jun 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we could use the next-swc binary here for transforming instead of installing @swc/core as well, this could help us ensure we're matching behavior as this is already enabled there.

This would also allow us to remove @swc/core as a dependency of the monorepo

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good idea. It also helps eliminate the inconsistency. Let me see what I can do.

Copy link
Contributor Author

@SukkaW SukkaW Jun 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ijjk I have tried to re-use the file next/build/swc/index.js, but the file is dependent on the precompiled @napi-rs/triple.

Maybe it could be done in another PR? Where the shared logic can be extracted into @next/swc package.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could potentially expose an env variable to signal it should use the direct module instead of the compiled one e.g. if (process.env.__NEXT_TASKR) { require('@napi-rs/triple') }

Yeah we can definitely investigate this in a separate PR

Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

@ijjk ijjk merged commit 4671010 into vercel:canary Jun 19, 2022
ijjk added a commit that referenced this pull request Jun 19, 2022
ijjk added a commit that referenced this pull request Jun 19, 2022
…37829)

Revert "Enable `externalHelpers` when pre compiling Next.js' code (#37164)"

This reverts commit 4671010.

// Do not enable externalHelpers for server-side code
// "_is_native_function.mjs" helper is not compatible with edge runtime
externalHelpers: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this is also an issue with the client x-ref: #37829

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 20, 2022
@SukkaW SukkaW deleted the external-helper-build branch October 24, 2023 08:34
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants