Skip to content

Commit

Permalink
Allow pre-release React 18 as peer (#31991)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chentsulin
chentsulin committed Dec 1, 2021
1 parent 73d7f94 commit 332cd06
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/next/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@
"peerDependencies": {
"fibers": ">= 3.1.0",
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
"react": "^17.0.2 || ^18.0.0",
"react-dom": "^17.0.2 || ^18.0.0",
"react": "^17.0.2 || ^18.0.0-0",
"react-dom": "^17.0.2 || ^18.0.0-0",
"sass": "^1.3.0"
},
"peerDependenciesMeta": {
Expand Down

1 comment on commit 332cd06

@ijjk
Copy link
Member

@ijjk ijjk commented on 332cd06 Dec 1, 2021

Choose a reason for hiding this comment

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

Stats from current release

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
buildDuration 20s 20.6s ⚠️ +545ms
buildDurationCached 3.8s 3.8s -46ms
nodeModulesSize 347 MB 347 MB ⚠️ +22.2 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 3.409 3.293 -0.12
/ avg req/sec 733.27 759.2 +25.93
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.506 1.554 ⚠️ +0.05
/error-in-render avg req/sec 1659.94 1608.24 ⚠️ -51.7
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
450.HASH.js gzip 179 B 179 B ✓
framework-HASH.js gzip 42.2 kB 42.2 kB ✓
main-HASH.js gzip 28.4 kB 28.4 kB ⚠️ +37 B
webpack-HASH.js gzip 1.45 kB 1.45 kB ✓
Overall change 72.2 kB 72.3 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
_app-HASH.js gzip 1.37 kB 1.37 kB ✓
_error-HASH.js gzip 194 B 194 B ✓
amp-HASH.js gzip 312 B 312 B ✓
css-HASH.js gzip 327 B 326 B -1 B
dynamic-HASH.js gzip 2.38 kB 2.38 kB ✓
head-HASH.js gzip 350 B 350 B ✓
hooks-HASH.js gzip 635 B 635 B ✓
image-HASH.js gzip 4.44 kB 4.49 kB ⚠️ +46 B
index-HASH.js gzip 263 B 263 B ✓
link-HASH.js gzip 1.87 kB 1.87 kB ✓
routerDirect..HASH.js gzip 321 B 321 B ✓
script-HASH.js gzip 383 B 383 B ✓
withRouter-HASH.js gzip 318 B 318 B ✓
85e02e95b279..7e3.css gzip 107 B 107 B ✓
Overall change 13.3 kB 13.3 kB ⚠️ +45 B
Client Build Manifests
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
_buildManifest.js gzip 460 B 460 B ✓
Overall change 460 B 460 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
index.html gzip 522 B 532 B ⚠️ +10 B
link.html gzip 535 B 546 B ⚠️ +11 B
withRouter.html gzip 516 B 527 B ⚠️ +11 B
Overall change 1.57 kB 1.6 kB ⚠️ +32 B

Diffs

Diff for _buildManifest.js 
@@ -5,15 +5,15 @@ self.__BUILD_MANIFEST = {
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-deb2f2a41a5bf511.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-97182c5b8324021a.js"
   ],
   "/dynamic": [
     "static\u002Fchunks\u002Fpages\u002Fdynamic-0a48d89fced3e24b.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2a8b03d7b35abada.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-f207079640969086.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-678af336607f5345.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
   ],
Diff for css-HASH.js 
@@ -29,7 +29,7 @@
         5893
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        3350
+        1785
       );
       /* 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 @@
       /***/
     },
 
-    /***/ 3350: /***/ function(module) {
+    /***/ 1785: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
Diff for image-HASH.js 
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3155);
+          return __webpack_require__(5924);
         }
       ]);
       if (false) {
@@ -37,6 +37,19 @@
           return arr2;
         }
       }
+      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 _iterableToArray(iter) {
         if (
           Symbol.iterator in Object(iter) ||
@@ -101,7 +114,7 @@
       var _toBase64 = __webpack_require__(6978);
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
-      function _defineProperty(obj, key, value) {
+      function _defineProperty1(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
             value: value,
@@ -137,7 +150,7 @@
               );
             }
             ownKeys.forEach(function(key) {
-              _defineProperty(target, key, source[key]);
+              _defineProperty1(target, key, source[key]);
             });
           };
         for (var i = 1; i < arguments.length; i++) _loop(i);
@@ -403,6 +416,7 @@
           img.onload = handleLoad;
         }
       }
+      var _obj;
       function Image(_param) {
         var src = _param.src,
           sizes = _param.sizes,
@@ -624,6 +638,15 @@
         if (false) {
           var fullUrl;
         }
+        var imageSrcSetPropName = "imagesrcset";
+        var imageSizesPropName = "imagesizes";
+        if (false) {
+        }
+        var linkProps =
+          ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+          _obj);
         return /*#__PURE__*/ _react.default.createElement(
           "span",
           {
@@ -711,20 +734,22 @@
               /*#__PURE__*/ _react.default.createElement(
                 _head.default,
                 null,
-                /*#__PURE__*/ _react.default.createElement("link", {
-                  key:
-                    "__nimg-" +
-                    imgAttributes.src +
-                    imgAttributes.srcSet +
-                    imgAttributes.sizes,
-                  rel: "preload",
-                  as: "image",
-                  href: imgAttributes.srcSet ? undefined : imgAttributes.src,
-                  // @ts-ignore: imagesrcset is not yet in the link element type.
-                  imagesrcset: imgAttributes.srcSet,
-                  // @ts-ignore: imagesizes is not yet in the link element type.
-                  imagesizes: imgAttributes.sizes
-                })
+                /*#__PURE__*/ _react.default.createElement(
+                  "link",
+                  Object.assign(
+                    {
+                      key:
+                        "__nimg-" +
+                        imgAttributes.src +
+                        imgAttributes.srcSet +
+                        imgAttributes.sizes,
+                      rel: "preload",
+                      as: "image",
+                      href: imgAttributes.srcSet ? undefined : imgAttributes.src
+                    },
+                    linkProps
+                  )
+                )
               )
             : null
         );
@@ -969,7 +994,7 @@
       /***/
     },
 
-    /***/ 3155: /***/ function(
+    /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for link-HASH.js 
@@ -184,7 +184,6 @@
           shallow = props.shallow,
           scroll = props.scroll,
           locale = props.locale;
-        // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
         if (typeof children === "string") {
           children = /*#__PURE__*/ _react.default.createElement(
             "a",
Diff for main-HASH.js 
@@ -590,7 +590,7 @@
         document.getElementById("__NEXT_DATA__").textContent
       );
       window.__NEXT_DATA__ = data;
-      var version = "12.0.4";
+      var version = "12.0.5-canary.13";
       exports.version = version;
       var looseToArray = function(input) {
         return [].slice.call(input);
@@ -1541,17 +1541,15 @@
           this.routeLoader = (0, _routeLoader).createRouteLoader(assetPrefix);
           this.buildId = buildId;
           this.assetPrefix = assetPrefix;
-          /** @type {Promise<Set<string>>} */ this.promisedSsgManifest = new Promise(
-            function(resolve) {
-              if (window.__SSG_MANIFEST) {
+          this.promisedSsgManifest = new Promise(function(resolve) {
+            if (window.__SSG_MANIFEST) {
+              resolve(window.__SSG_MANIFEST);
+            } else {
+              window.__SSG_MANIFEST_CB = function() {
                 resolve(window.__SSG_MANIFEST);
-              } else {
-                window.__SSG_MANIFEST_CB = function() {
-                  resolve(window.__SSG_MANIFEST);
-                };
-              }
+              };
             }
-          );
+          });
         }
         _createClass(PageLoader, [
           {
@@ -1626,8 +1624,8 @@
              * @param {string} route - the route (file-system path)
              */ key: "_isSsg",
             value: function _isSsg(route) {
-              return this.promisedSsgManifest.then(function(s) {
-                return s.has(route);
+              return this.promisedSsgManifest.then(function(manifest) {
+                return manifest.has(route);
               });
             }
           },
@@ -2272,31 +2270,31 @@
             var _this = this;
             return withFuture(route, routes, function() {
               var _this1 = _this;
-              var routeFilesPromise = getFilesForRoute(assetPrefix, route)
-                .then(function(param) {
-                  var scripts = param.scripts,
-                    css = param.css;
-                  return Promise.all([
-                    entrypoints.has(route)
-                      ? []
-                      : Promise.all(scripts.map(maybeExecuteScript)),
-                    Promise.all(css.map(fetchStyleSheet))
-                  ]);
-                })
-                .then(function(res) {
-                  return _this1
-                    .whenEntrypoint(route)
-                    .then(function(entrypoint) {
-                      return {
-                        entrypoint: entrypoint,
-                        styles: res[1]
-                      };
-                    });
-                });
+              var devBuildPromiseResolve;
               if (false) {
               }
               return resolvePromiseWithTimeout(
-                routeFilesPromise,
+                getFilesForRoute(assetPrefix, route)
+                  .then(function(param) {
+                    var scripts = param.scripts,
+                      css = param.css;
+                    return Promise.all([
+                      entrypoints.has(route)
+                        ? []
+                        : Promise.all(scripts.map(maybeExecuteScript)),
+                      Promise.all(css.map(fetchStyleSheet))
+                    ]);
+                  })
+                  .then(function(res) {
+                    return _this1
+                      .whenEntrypoint(route)
+                      .then(function(entrypoint) {
+                        return {
+                          entrypoint: entrypoint,
+                          styles: res[1]
+                        };
+                      });
+                  }),
                 MS_MAX_IDLE_DELAY,
                 markAssetError(
                   new Error("Route did not complete loading: ".concat(route))
@@ -2321,6 +2319,12 @@
                   return {
                     error: err
                   };
+                })
+                .finally(function() {
+                  return devBuildPromiseResolve === null ||
+                    devBuildPromiseResolve === void 0
+                    ? void 0
+                    : devBuildPromiseResolve();
                 });
             });
           },
@@ -4855,7 +4859,11 @@
                                 delBasePath(resolvedAs),
                                 this.locale
                               );
-                              _ctx.next = 66;
+                              if (!(options._h !== 1)) {
+                                _ctx.next = 84;
+                                break;
+                              }
+                              _ctx.next = 67;
                               return this._preflightRequest({
                                 as: as,
                                 cache: "production" === "production",
@@ -4863,10 +4871,10 @@
                                 pathname: pathname,
                                 query: query
                               });
-                            case 66:
+                            case 67:
                               effect = _ctx.sent;
                               if (!(effect.type === "rewrite")) {
-                                _ctx.next = 71;
+                                _ctx.next = 72;
                                 break;
                               }
                               {
@@ -4880,13 +4888,13 @@
                                 parsed.pathname = effect.resolvedHref;
                                 url = (0, _utils).formatWithValidation(parsed);
                               }
-                              _ctx.next = 83;
+                              _ctx.next = 84;
                               break;
-                            case 71:
+                            case 72:
                               if (
                                 !(effect.type === "redirect" && effect.newAs)
                               ) {
-                                _ctx.next = 75;
+                                _ctx.next = 76;
                                 break;
                               }
                               return _ctx.abrupt(
@@ -4898,14 +4906,14 @@
                                   options
                                 )
                               );
-                            case 75:
+                            case 76:
                               if (
                                 !(
                                   effect.type === "redirect" &&
                                   effect.destination
                                 )
                               ) {
-                                _ctx.next = 80;
+                                _ctx.next = 81;
                                 break;
                               }
                               window.location.href = effect.destination;
@@ -4913,9 +4921,9 @@
                                 "return",
                                 new Promise(function() {})
                               );
-                            case 80:
+                            case 81:
                               if (!(effect.type === "refresh")) {
-                                _ctx.next = 83;
+                                _ctx.next = 84;
                                 break;
                               }
                               window.location.href = as;
@@ -4923,13 +4931,13 @@
                                 "return",
                                 new Promise(function() {})
                               );
-                            case 83:
+                            case 84:
                               route = (0,
                               _normalizeTrailingSlash).removePathTrailingSlash(
                                 pathname
                               );
                               if (!(0, _isDynamic).isDynamicRoute(route)) {
-                                _ctx.next = 99;
+                                _ctx.next = 100;
                                 break;
                               }
                               parsedAs1 = (0,
@@ -4951,7 +4959,7 @@
                                   (shouldInterpolate && !interpolatedAs.result)
                                 )
                               ) {
-                                _ctx.next = 98;
+                                _ctx.next = 99;
                                 break;
                               }
                               missingParams = Object.keys(
@@ -4960,7 +4968,7 @@
                                 return !query[param];
                               });
                               if (!(missingParams.length > 0)) {
-                                _ctx.next = 96;
+                                _ctx.next = 97;
                                 break;
                               }
                               if (false) {
@@ -4988,10 +4996,10 @@
                                       : "incompatible-href-as"
                                   )
                               );
-                            case 96:
-                              _ctx.next = 99;
+                            case 97:
+                              _ctx.next = 100;
                               break;
-                            case 98:
+                            case 99:
                               if (shouldInterpolate) {
                                 as = (0, _utils).formatWithValidation(
                                   Object.assign({}, parsedAs1, {
@@ -5006,14 +5014,14 @@
                                 // Merge params into `query`, overwriting any specified in search
                                 Object.assign(query, routeMatch);
                               }
-                            case 99:
+                            case 100:
                               Router.events.emit(
                                 "routeChangeStart",
                                 as,
                                 routeProps
                               );
-                              _ctx.prev = 100;
-                              _ctx.next = 104;
+                              _ctx.prev = 101;
+                              _ctx.next = 105;
                               return this.getRouteInfo(
                                 route,
                                 pathname,
@@ -5022,14 +5030,14 @@
                                 resolvedAs,
                                 routeProps
                               );
-                            case 104:
+                            case 105:
                               routeInfo = _ctx.sent;
                               (error = routeInfo.error),
                                 (props = routeInfo.props),
                                 (__N_SSG = routeInfo.__N_SSG),
                                 (__N_SSP = routeInfo.__N_SSP);
                               if (!((__N_SSG || __N_SSP) && props)) {
-                                _ctx.next = 131;
+                                _ctx.next = 132;
                                 break;
                               }
                               if (
@@ -5038,7 +5046,7 @@
                                   props.pageProps.__N_REDIRECT
                                 )
                               ) {
-                                _ctx.next = 116;
+                                _ctx.next = 117;
                                 break;
                               }
                               destination = props.pageProps.__N_REDIRECT;
@@ -5049,7 +5057,7 @@
                                     false
                                 )
                               ) {
-                                _ctx.next = 114;
+                                _ctx.next = 115;
                                 break;
                               }
                               parsedHref = (0,
@@ -5069,31 +5077,31 @@
                                 "return",
                                 this.change(method, newUrl, newAs, options)
                               );
-                            case 114:
+                            case 115:
                               window.location.href = destination;
                               return _ctx.abrupt(
                                 "return",
                                 new Promise(function() {})
                               );
-                            case 116:
+                            case 117:
                               this.isPreview = !!props.__N_PREVIEW;
                               if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
-                                _ctx.next = 131;
+                                _ctx.next = 132;
                                 break;
                               }
-                              _ctx.prev = 119;
-                              _ctx.next = 122;
+                              _ctx.prev = 120;
+                              _ctx.next = 123;
                               return this.fetchComponent("/404");
-                            case 122:
+                            case 123:
                               notFoundRoute = "/404";
-                              _ctx.next = 128;
+                              _ctx.next = 129;
                               break;
-                            case 125:
-                              _ctx.prev = 125;
-                              _ctx.t3 = _ctx["catch"](119);
+                            case 126:
+                              _ctx.prev = 126;
+                              _ctx.t3 = _ctx["catch"](120);
                               notFoundRoute = "/_error";
-                            case 128:
-                              _ctx.next = 130;
+                            case 129:
+                              _ctx.next = 131;
                               return this.getRouteInfo(
                                 notFoundRoute,
                                 notFoundRoute,
@@ -5104,9 +5112,9 @@
                                   shallow: false
                                 }
                               );
-                            case 130:
-                              routeInfo = _ctx.sent;
                             case 131:
+                              routeInfo = _ctx.sent;
+                            case 132:
                               Router.events.emit(
                                 "beforeHistoryChange",
                                 as,
@@ -5144,7 +5152,7 @@
                                     y: 0
                                   }
                                 : null;
-                              _ctx.next = 140;
+                              _ctx.next = 141;
                               return this.set(
                                 route,
                                 pathname,
@@ -5158,9 +5166,9 @@
                                 if (e.cancelled) error = error || e;
                                 else throw e;
                               });
-                            case 140:
+                            case 141:
                               if (!error) {
-                                _ctx.next = 143;
+                                _ctx.next = 144;
                                 break;
                               }
                               Router.events.emit(
@@ -5170,7 +5178,7 @@
                                 routeProps
                               );
                               throw error;
-                            case 143:
+                            case 144:
                               if (false) {
                               }
                               Router.events.emit(
@@ -5179,22 +5187,22 @@
                                 routeProps
                               );
                               return _ctx.abrupt("return", true);
-                            case 148:
-                              _ctx.prev = 148;
-                              _ctx.t4 = _ctx["catch"](100);
+                            case 149:
+                              _ctx.prev = 149;
+                              _ctx.t4 = _ctx["catch"](101);
                               if (
                                 !(
                                   (0, _isError).default(_ctx.t4) &&
                                   _ctx.t4.cancelled
                                 )
                               ) {
-                                _ctx.next = 152;
+                                _ctx.next = 153;
                                 break;
                               }
                               return _ctx.abrupt("return", false);
-                            case 152:
-                              throw _ctx.t4;
                             case 153:
+                              throw _ctx.t4;
+                            case 154:
                             case "end":
                               return _ctx.stop();
                           }
@@ -5203,8 +5211,8 @@
                       this,
                       [
                         [38, 50],
-                        [100, 148],
-                        [119, 125]
+                        [101, 149],
+                        [120, 126]
                       ]
                     );
                   })
Diff for index.html 
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-d83007871c015cb0.js"
+      src="/_next/static/chunks/main-af6fca2c1fc4bb8b.js"
       defer=""
     ></script>
     <script
@@ -38,7 +38,7 @@
     ></script>
   </head>
   <body>
-    <div id="__next">Hello world 👋</div>
+    <div id="__next" data-reactroot="">Hello world 👋</div>
     <script id="__NEXT_DATA__" type="application/json">
       {
         "props": { "pageProps": {}, "__N_SSP": true },
Diff for link.html 
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-d83007871c015cb0.js"
+      src="/_next/static/chunks/main-af6fca2c1fc4bb8b.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-fa969765a079642e.js"
+      src="/_next/static/chunks/pages/link-678af336607f5345.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
@@ -38,7 +38,7 @@
     ></script>
   </head>
   <body>
-    <div id="__next">
+    <div id="__next" data-reactroot="">
       <div>
         <h3>A Link page!</h3>
         <a href="/">Go to /</a>
Diff for withRouter.html 
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-d83007871c015cb0.js"
+      src="/_next/static/chunks/main-af6fca2c1fc4bb8b.js"
       defer=""
     ></script>
     <script
@@ -38,7 +38,7 @@
     ></script>
   </head>
   <body>
-    <div id="__next"><div>I use withRouter</div></div>
+    <div id="__next" data-reactroot=""><div>I use withRouter</div></div>
     <script id="__NEXT_DATA__" type="application/json">
       {
         "props": { "pageProps": {}, "__N_SSP": true },
Default Build with SWC (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
buildDuration 21.3s 22.1s ⚠️ +807ms
buildDurationCached 4s 3.8s -184ms
nodeModulesSize 347 MB 347 MB ⚠️ +22.2 kB
Page Load Tests Overall increase ✓
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 3.335 3.36 ⚠️ +0.02
/ avg req/sec 749.67 744.08 ⚠️ -5.59
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.541 1.533 -0.01
/error-in-render avg req/sec 1622.84 1631.26 +8.42
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
450.HASH.js gzip 179 B 179 B ✓
framework-HASH.js gzip 42.3 kB 42.3 kB ✓
main-HASH.js gzip 28.6 kB 28.6 kB ⚠️ +26 B
webpack-HASH.js gzip 1.44 kB 1.44 kB ✓
Overall change 72.5 kB 72.5 kB ⚠️ +26 B
Legacy Client Bundles (polyfills)
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
_app-HASH.js gzip 1.35 kB 1.35 kB ✓
_error-HASH.js gzip 180 B 180 B ✓
amp-HASH.js gzip 305 B 305 B ✓
css-HASH.js gzip 321 B 321 B ✓
dynamic-HASH.js gzip 2.37 kB 2.37 kB ✓
head-HASH.js gzip 342 B 342 B ✓
hooks-HASH.js gzip 622 B 622 B ✓
image-HASH.js gzip 4.46 kB 4.53 kB ⚠️ +63 B
index-HASH.js gzip 256 B 256 B ✓
link-HASH.js gzip 1.91 kB 1.91 kB ✓
routerDirect..HASH.js gzip 314 B 314 B ✓
script-HASH.js gzip 375 B 375 B ✓
withRouter-HASH.js gzip 309 B 309 B ✓
85e02e95b279..7e3.css gzip 107 B 107 B ✓
Overall change 13.2 kB 13.3 kB ⚠️ +63 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
_buildManifest.js gzip 459 B 458 B -1 B
Overall change 459 B 458 B -1 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary v12.0.4 vercel/next.js refs/heads/canary Change
index.html gzip 523 B 531 B ⚠️ +8 B
link.html gzip 535 B 545 B ⚠️ +10 B
withRouter.html gzip 517 B 525 B ⚠️ +8 B
Overall change 1.57 kB 1.6 kB ⚠️ +26 B

Diffs

Diff for _buildManifest.js 
@@ -5,15 +5,15 @@ self.__BUILD_MANIFEST = {
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-deb2f2a41a5bf511.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-97182c5b8324021a.js"
   ],
   "/dynamic": [
     "static\u002Fchunks\u002Fpages\u002Fdynamic-0a48d89fced3e24b.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2a8b03d7b35abada.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-f207079640969086.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-678af336607f5345.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
   ],
Diff for css-HASH.js 
@@ -29,7 +29,7 @@
         5893
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        3350
+        1785
       );
       /* 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 @@
       /***/
     },
 
-    /***/ 3350: /***/ function(module) {
+    /***/ 1785: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
Diff for image-HASH.js 
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3155);
+          return __webpack_require__(5924);
         }
       ]);
       if (false) {
@@ -37,6 +37,19 @@
           return arr2;
         }
       }
+      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 _iterableToArray(iter) {
         if (
           Symbol.iterator in Object(iter) ||
@@ -101,7 +114,7 @@
       var _toBase64 = __webpack_require__(6978);
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
-      function _defineProperty(obj, key, value) {
+      function _defineProperty1(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
             value: value,
@@ -137,7 +150,7 @@
               );
             }
             ownKeys.forEach(function(key) {
-              _defineProperty(target, key, source[key]);
+              _defineProperty1(target, key, source[key]);
             });
           };
         for (var i = 1; i < arguments.length; i++) _loop(i);
@@ -403,6 +416,7 @@
           img.onload = handleLoad;
         }
       }
+      var _obj;
       function Image(_param) {
         var src = _param.src,
           sizes = _param.sizes,
@@ -624,6 +638,15 @@
         if (false) {
           var fullUrl;
         }
+        var imageSrcSetPropName = "imagesrcset";
+        var imageSizesPropName = "imagesizes";
+        if (false) {
+        }
+        var linkProps =
+          ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+          _obj);
         return /*#__PURE__*/ _react.default.createElement(
           "span",
           {
@@ -711,20 +734,22 @@
               /*#__PURE__*/ _react.default.createElement(
                 _head.default,
                 null,
-                /*#__PURE__*/ _react.default.createElement("link", {
-                  key:
-                    "__nimg-" +
-                    imgAttributes.src +
-                    imgAttributes.srcSet +
-                    imgAttributes.sizes,
-                  rel: "preload",
-                  as: "image",
-                  href: imgAttributes.srcSet ? undefined : imgAttributes.src,
-                  // @ts-ignore: imagesrcset is not yet in the link element type.
-                  imagesrcset: imgAttributes.srcSet,
-                  // @ts-ignore: imagesizes is not yet in the link element type.
-                  imagesizes: imgAttributes.sizes
-                })
+                /*#__PURE__*/ _react.default.createElement(
+                  "link",
+                  Object.assign(
+                    {
+                      key:
+                        "__nimg-" +
+                        imgAttributes.src +
+                        imgAttributes.srcSet +
+                        imgAttributes.sizes,
+                      rel: "preload",
+                      as: "image",
+                      href: imgAttributes.srcSet ? undefined : imgAttributes.src
+                    },
+                    linkProps
+                  )
+                )
               )
             : null
         );
@@ -969,7 +994,7 @@
       /***/
     },
 
-    /***/ 3155: /***/ function(
+    /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for link-HASH.js 
@@ -184,7 +184,6 @@
           shallow = props.shallow,
           scroll = props.scroll,
           locale = props.locale;
-        // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
         if (typeof children === "string") {
           children = /*#__PURE__*/ _react.default.createElement(
             "a",
Diff for main-HASH.js 
@@ -590,7 +590,7 @@
         document.getElementById("__NEXT_DATA__").textContent
       );
       window.__NEXT_DATA__ = data;
-      var version = "12.0.4";
+      var version = "12.0.5-canary.13";
       exports.version = version;
       var looseToArray = function(input) {
         return [].slice.call(input);
@@ -1541,17 +1541,15 @@
           this.routeLoader = (0, _routeLoader).createRouteLoader(assetPrefix);
           this.buildId = buildId;
           this.assetPrefix = assetPrefix;
-          /** @type {Promise<Set<string>>} */ this.promisedSsgManifest = new Promise(
-            function(resolve) {
-              if (window.__SSG_MANIFEST) {
+          this.promisedSsgManifest = new Promise(function(resolve) {
+            if (window.__SSG_MANIFEST) {
+              resolve(window.__SSG_MANIFEST);
+            } else {
+              window.__SSG_MANIFEST_CB = function() {
                 resolve(window.__SSG_MANIFEST);
-              } else {
-                window.__SSG_MANIFEST_CB = function() {
-                  resolve(window.__SSG_MANIFEST);
-                };
-              }
+              };
             }
-          );
+          });
         }
         _createClass(PageLoader, [
           {
@@ -1626,8 +1624,8 @@
              * @param {string} route - the route (file-system path)
              */ key: "_isSsg",
             value: function _isSsg(route) {
-              return this.promisedSsgManifest.then(function(s) {
-                return s.has(route);
+              return this.promisedSsgManifest.then(function(manifest) {
+                return manifest.has(route);
               });
             }
           },
@@ -2272,31 +2270,31 @@
             var _this = this;
             return withFuture(route, routes, function() {
               var _this1 = _this;
-              var routeFilesPromise = getFilesForRoute(assetPrefix, route)
-                .then(function(param) {
-                  var scripts = param.scripts,
-                    css = param.css;
-                  return Promise.all([
-                    entrypoints.has(route)
-                      ? []
-                      : Promise.all(scripts.map(maybeExecuteScript)),
-                    Promise.all(css.map(fetchStyleSheet))
-                  ]);
-                })
-                .then(function(res) {
-                  return _this1
-                    .whenEntrypoint(route)
-                    .then(function(entrypoint) {
-                      return {
-                        entrypoint: entrypoint,
-                        styles: res[1]
-                      };
-                    });
-                });
+              var devBuildPromiseResolve;
               if (false) {
               }
               return resolvePromiseWithTimeout(
-                routeFilesPromise,
+                getFilesForRoute(assetPrefix, route)
+                  .then(function(param) {
+                    var scripts = param.scripts,
+                      css = param.css;
+                    return Promise.all([
+                      entrypoints.has(route)
+                        ? []
+                        : Promise.all(scripts.map(maybeExecuteScript)),
+                      Promise.all(css.map(fetchStyleSheet))
+                    ]);
+                  })
+                  .then(function(res) {
+                    return _this1
+                      .whenEntrypoint(route)
+                      .then(function(entrypoint) {
+                        return {
+                          entrypoint: entrypoint,
+                          styles: res[1]
+                        };
+                      });
+                  }),
                 MS_MAX_IDLE_DELAY,
                 markAssetError(
                   new Error("Route did not complete loading: ".concat(route))
@@ -2321,6 +2319,12 @@
                   return {
                     error: err
                   };
+                })
+                .finally(function() {
+                  return devBuildPromiseResolve === null ||
+                    devBuildPromiseResolve === void 0
+                    ? void 0
+                    : devBuildPromiseResolve();
                 });
             });
           },
@@ -4855,7 +4859,11 @@
                                 delBasePath(resolvedAs),
                                 this.locale
                               );
-                              _ctx.next = 66;
+                              if (!(options._h !== 1)) {
+                                _ctx.next = 84;
+                                break;
+                              }
+                              _ctx.next = 67;
                               return this._preflightRequest({
                                 as: as,
                                 cache: "production" === "production",
@@ -4863,10 +4871,10 @@
                                 pathname: pathname,
                                 query: query
                               });
-                            case 66:
+                            case 67:
                               effect = _ctx.sent;
                               if (!(effect.type === "rewrite")) {
-                                _ctx.next = 71;
+                                _ctx.next = 72;
                                 break;
                               }
                               {
@@ -4880,13 +4888,13 @@
                                 parsed.pathname = effect.resolvedHref;
                                 url = (0, _utils).formatWithValidation(parsed);
                               }
-                              _ctx.next = 83;
+                              _ctx.next = 84;
                               break;
-                            case 71:
+                            case 72:
                               if (
                                 !(effect.type === "redirect" && effect.newAs)
                               ) {
-                                _ctx.next = 75;
+                                _ctx.next = 76;
                                 break;
                               }
                               return _ctx.abrupt(
@@ -4898,14 +4906,14 @@
                                   options
                                 )
                               );
-                            case 75:
+                            case 76:
                               if (
                                 !(
                                   effect.type === "redirect" &&
                                   effect.destination
                                 )
                               ) {
-                                _ctx.next = 80;
+                                _ctx.next = 81;
                                 break;
                               }
                               window.location.href = effect.destination;
@@ -4913,9 +4921,9 @@
                                 "return",
                                 new Promise(function() {})
                               );
-                            case 80:
+                            case 81:
                               if (!(effect.type === "refresh")) {
-                                _ctx.next = 83;
+                                _ctx.next = 84;
                                 break;
                               }
                               window.location.href = as;
@@ -4923,13 +4931,13 @@
                                 "return",
                                 new Promise(function() {})
                               );
-                            case 83:
+                            case 84:
                               route = (0,
                               _normalizeTrailingSlash).removePathTrailingSlash(
                                 pathname
                               );
                               if (!(0, _isDynamic).isDynamicRoute(route)) {
-                                _ctx.next = 99;
+                                _ctx.next = 100;
                                 break;
                               }
                               parsedAs1 = (0,
@@ -4951,7 +4959,7 @@
                                   (shouldInterpolate && !interpolatedAs.result)
                                 )
                               ) {
-                                _ctx.next = 98;
+                                _ctx.next = 99;
                                 break;
                               }
                               missingParams = Object.keys(
@@ -4960,7 +4968,7 @@
                                 return !query[param];
                               });
                               if (!(missingParams.length > 0)) {
-                                _ctx.next = 96;
+                                _ctx.next = 97;
                                 break;
                               }
                               if (false) {
@@ -4988,10 +4996,10 @@
                                       : "incompatible-href-as"
                                   )
                               );
-                            case 96:
-                              _ctx.next = 99;
+                            case 97:
+                              _ctx.next = 100;
                               break;
-                            case 98:
+                            case 99:
                               if (shouldInterpolate) {
                                 as = (0, _utils).formatWithValidation(
                                   Object.assign({}, parsedAs1, {
@@ -5006,14 +5014,14 @@
                                 // Merge params into `query`, overwriting any specified in search
                                 Object.assign(query, routeMatch);
                               }
-                            case 99:
+                            case 100:
                               Router.events.emit(
                                 "routeChangeStart",
                                 as,
                                 routeProps
                               );
-                              _ctx.prev = 100;
-                              _ctx.next = 104;
+                              _ctx.prev = 101;
+                              _ctx.next = 105;
                               return this.getRouteInfo(
                                 route,
                                 pathname,
@@ -5022,14 +5030,14 @@
                                 resolvedAs,
                                 routeProps
                               );
-                            case 104:
+                            case 105:
                               routeInfo = _ctx.sent;
                               (error = routeInfo.error),
                                 (props = routeInfo.props),
                                 (__N_SSG = routeInfo.__N_SSG),
                                 (__N_SSP = routeInfo.__N_SSP);
                               if (!((__N_SSG || __N_SSP) && props)) {
-                                _ctx.next = 131;
+                                _ctx.next = 132;
                                 break;
                               }
                               if (
@@ -5038,7 +5046,7 @@
                                   props.pageProps.__N_REDIRECT
                                 )
                               ) {
-                                _ctx.next = 116;
+                                _ctx.next = 117;
                                 break;
                               }
                               destination = props.pageProps.__N_REDIRECT;
@@ -5049,7 +5057,7 @@
                                     false
                                 )
                               ) {
-                                _ctx.next = 114;
+                                _ctx.next = 115;
                                 break;
                               }
                               parsedHref = (0,
@@ -5069,31 +5077,31 @@
                                 "return",
                                 this.change(method, newUrl, newAs, options)
                               );
-                            case 114:
+                            case 115:
                               window.location.href = destination;
                               return _ctx.abrupt(
                                 "return",
                                 new Promise(function() {})
                               );
-                            case 116:
+                            case 117:
                               this.isPreview = !!props.__N_PREVIEW;
                               if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
-                                _ctx.next = 131;
+                                _ctx.next = 132;
                                 break;
                               }
-                              _ctx.prev = 119;
-                              _ctx.next = 122;
+                              _ctx.prev = 120;
+                              _ctx.next = 123;
                               return this.fetchComponent("/404");
-                            case 122:
+                            case 123:
                               notFoundRoute = "/404";
-                              _ctx.next = 128;
+                              _ctx.next = 129;
                               break;
-                            case 125:
-                              _ctx.prev = 125;
-                              _ctx.t3 = _ctx["catch"](119);
+                            case 126:
+                              _ctx.prev = 126;
+                              _ctx.t3 = _ctx["catch"](120);
                               notFoundRoute = "/_error";
-                            case 128:
-                              _ctx.next = 130;
+                            case 129:
+                              _ctx.next = 131;
                               return this.getRouteInfo(
                                 notFoundRoute,
                                 notFoundRoute,
@@ -5104,9 +5112,9 @@
                                   shallow: false
                                 }
                               );
-                            case 130:
-                              routeInfo = _ctx.sent;
                             case 131:
+                              routeInfo = _ctx.sent;
+                            case 132:
                               Router.events.emit(
                                 "beforeHistoryChange",
                                 as,
@@ -5144,7 +5152,7 @@
                                     y: 0
                                   }
                                 : null;
-                              _ctx.next = 140;
+                              _ctx.next = 141;
                               return this.set(
                                 route,
                                 pathname,
@@ -5158,9 +5166,9 @@
                                 if (e.cancelled) error = error || e;
                                 else throw e;
                               });
-                            case 140:
+                            case 141:
                               if (!error) {
-                                _ctx.next = 143;
+                                _ctx.next = 144;
                                 break;
                               }
                               Router.events.emit(
@@ -5170,7 +5178,7 @@
                                 routeProps
                               );
                               throw error;
-                            case 143:
+                            case 144:
                               if (false) {
                               }
                               Router.events.emit(
@@ -5179,22 +5187,22 @@
                                 routeProps
                               );
                               return _ctx.abrupt("return", true);
-                            case 148:
-                              _ctx.prev = 148;
-                              _ctx.t4 = _ctx["catch"](100);
+                            case 149:
+                              _ctx.prev = 149;
+                              _ctx.t4 = _ctx["catch"](101);
                               if (
                                 !(
                                   (0, _isError).default(_ctx.t4) &&
                                   _ctx.t4.cancelled
                                 )
                               ) {
-                                _ctx.next = 152;
+                                _ctx.next = 153;
                                 break;
                               }
                               return _ctx.abrupt("return", false);
-                            case 152:
-                              throw _ctx.t4;
                             case 153:
+                              throw _ctx.t4;
+                            case 154:
                             case "end":
                               return _ctx.stop();
                           }
@@ -5203,8 +5211,8 @@
                       this,
                       [
                         [38, 50],
-                        [100, 148],
-                        [119, 125]
+                        [101, 149],
+                        [120, 126]
                       ]
                     );
                   })
Diff for index.html 
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-d83007871c015cb0.js"
+      src="/_next/static/chunks/main-af6fca2c1fc4bb8b.js"
       defer=""
     ></script>
     <script
@@ -38,7 +38,7 @@
     ></script>
   </head>
   <body>
-    <div id="__next">Hello world 👋</div>
+    <div id="__next" data-reactroot="">Hello world 👋</div>
     <script id="__NEXT_DATA__" type="application/json">
       {
         "props": { "pageProps": {}, "__N_SSP": true },
Diff for link.html 
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-d83007871c015cb0.js"
+      src="/_next/static/chunks/main-af6fca2c1fc4bb8b.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-fa969765a079642e.js"
+      src="/_next/static/chunks/pages/link-678af336607f5345.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
@@ -38,7 +38,7 @@
     ></script>
   </head>
   <body>
-    <div id="__next">
+    <div id="__next" data-reactroot="">
       <div>
         <h3>A Link page!</h3>
         <a href="/">Go to /</a>
Diff for withRouter.html 
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-d83007871c015cb0.js"
+      src="/_next/static/chunks/main-af6fca2c1fc4bb8b.js"
       defer=""
     ></script>
     <script
@@ -38,7 +38,7 @@
     ></script>
   </head>
   <body>
-    <div id="__next"><div>I use withRouter</div></div>
+    <div id="__next" data-reactroot=""><div>I use withRouter</div></div>
     <script id="__NEXT_DATA__" type="application/json">
       {
         "props": { "pageProps": {}, "__N_SSP": true },

Please sign in to comment.