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.

Sign up for GitHub

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

Jump to bottom

Fix basepath router events #14848

Merged
merged 25 commits into from
Jul 20, 2020
Merged

Fix basepath router events #14848

merged 25 commits into from
Jul 20, 2020

Conversation

Janpot
Copy link
Contributor

@Janpot Janpot commented Jul 4, 2020 •
edited
Loading

Fixes #14845 but turned into also fixing all kinds of related issues that surfaced

While writing these tests I noticed that routeChangeError was giving back the wrong url when the route is cancelled. It was giving the new url instead of the cancelled one.

It also revealed that routeChangeError event wasn't firing when getServerSideProps fails. Which causes a reload anyway, so probably not a big issue, but I fixed it with tests as well.

Writing hash change tests revealed that hash changes were broken under a basePath. Fixing this revealed a problem in serverless basepath handling which was also fixed and added tests for. The asPath also had basePath removed twice during initial load.

To Do:

  • decide whether basepath is actually wanted or not on these urls. I tend towards it being removed as that would pair nicely with asPath and other router logic which is all based on urls without basepath. but one could argue this will be often used for analytics where basepath is desired. basepath could be added manually though in these cases as it's exposed on the router instance. In any case, it's easily changed
  • no event is fired when changing a route results in an error (e.g. error in getServerSideProps)
  • test for routeChangeError, not cancelled, not sure how I can trigger https://github.com/vercel/next.js/pull/14848/files#diff-5eff10c96fa6858c659318492c4cf7f7R511
  • test for hashChangeStart, hashChangeComplete
  • .change has code paths that result in errors outside of the async flow. I rewrote it without Promise constructor. promises inside of a Promise constructor are usually a code smell. Fixes Potentially uncaught error in Next.js router #15063

Follow up later:

  • it looks like the addBasePath is called too soon, we should probably call it in changeState instead of prepareUrlAs. This would also make prepareUrlAs reusable for next/link. Maybe this makes more sense in a separate PR.

Tests still needed:

  • whether duplicate events are generated
  • whether events come in in the correct order
  • whether other unwanted events are generated

☝️ for these I now just assert for the full event log to be exact, not just the existence of certain events

@ijjk ijjk added the type: next label Jul 4, 2020
@ijjk
Copy link
Member

ijjk commented Jul 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.7s 11.9s -777ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +262 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.004 1.961 -0.04
/ avg req/sec 1247.52 1275.07 +27.55
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.146 1.22 ⚠️ +0.07
/error-in-render avg req/sec 2182.17 2048.49 ⚠️ -133.68
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB 10.7 kB ⚠️ +16 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB ⚠️ +16 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB 7.12 kB ⚠️ +25 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +25 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 953 B -1 B
link.html gzip 958 B 958 B ✓
withRouter.html gzip 945 B 944 B -1 B
Overall change 2.86 kB 2.85 kB -2 B

Diffs

Diff for 19b7e98f51cc..13.module.js 
@@ -782,6 +782,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -1004,7 +1005,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
@@ -1012,10 +1015,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
             if (!options._h && this.onlyAHashChange(as)) {
               this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
               this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1048,7 +1051,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               pathname
             );
             var { shallow = false } = options;
-            var cleanedAs = delBasePath(as);
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
@@ -1084,7 +1086,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
@@ -1094,7 +1096,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1104,11 +1106,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1434,11 +1436,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..079014588.js 
@@ -915,6 +915,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1158,7 +1159,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
@@ -1166,13 +1170,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                   if (!options._h && _this2.onlyAHashChange(as)) {
                     _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
                     _this2.scrollToHash(as);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1209,7 +1213,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var _options$shallow = options.shallow,
                     shallow =
                       _options$shallow === void 0 ? false : _options$shallow;
-                  var cleanedAs = delBasePath(as);
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref3 = (0, _url.parse)(cleanedAs),
@@ -1249,7 +1252,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1260,7 +1263,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1272,11 +1275,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1694,11 +1701,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.3074bdf5b11041dca215.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.31816b34b9a118096398.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.3074bdf5b11041dca215.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.3074bdf5b11041dca215.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.31816b34b9a118096398.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.3074bdf5b11041dca215.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.3074bdf5b11041dca215.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.31816b34b9a118096398.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.3074bdf5b11041dca215.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13s 13s ⚠️ +13ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +262 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..860a.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.2 kB ⚠️ +16 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.12 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +25 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 915 kB 915 kB ⚠️ +122 B
routerDirect.js 908 kB 908 kB ⚠️ +122 B
withRouter.js 908 kB 908 kB ⚠️ +122 B
Overall change 4.49 MB 4.49 MB ⚠️ +366 B
Commit: b2c59a5

@ijjk
Copy link
Member

ijjk commented Jul 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 11.4s 11.1s -321ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +543 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.921 1.816 -0.1
/ avg req/sec 1301.56 1376.69 +75.13
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.156 1.096 -0.06
/error-in-render avg req/sec 2163.05 2281.31 +118.26
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB 10.7 kB ⚠️ +29 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB ⚠️ +29 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB 7.13 kB ⚠️ +37 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 954 B ✓
link.html gzip 958 B 959 B ⚠️ +1 B
withRouter.html gzip 945 B 945 B ✓
Overall change 2.86 kB 2.86 kB ⚠️ +1 B

Diffs

Diff for 19b7e98f51cc..13.module.js 
@@ -782,6 +782,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -1004,7 +1005,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
@@ -1012,10 +1015,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
             if (!options._h && this.onlyAHashChange(as)) {
               this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
               this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1048,7 +1051,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               pathname
             );
             var { shallow = false } = options;
-            var cleanedAs = delBasePath(as);
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
@@ -1084,17 +1086,19 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
-                if (error && error.cancelled) {
+                if (error && error.aborted) {
+                  error.cancelled = false;
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1104,11 +1108,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1165,14 +1169,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
                 // So, we need to mark it as a cancelled error and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
                 });
               }
 
-              if (err.cancelled) {
+              if (err.aborted) {
                 // @ts-ignore TODO: fix the control flow here
                 return resolve({
                   error: err
@@ -1386,7 +1390,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             var error = new Error(
               'Abort fetching component for route: "'.concat(route, '"')
             );
-            error.cancelled = true;
+            error.aborted = true;
             throw error;
           }
 
@@ -1412,7 +1416,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
             if (cancelled) {
               var err = new Error("Loading initial props cancelled");
-              err.cancelled = true;
+              err.aborted = true;
               throw err;
             }
 
@@ -1434,11 +1438,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..079014588.js 
@@ -915,6 +915,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1158,7 +1159,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
@@ -1166,13 +1170,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                   if (!options._h && _this2.onlyAHashChange(as)) {
                     _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
                     _this2.scrollToHash(as);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1209,7 +1213,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var _options$shallow = options.shallow,
                     shallow =
                       _options$shallow === void 0 ? false : _options$shallow;
-                  var cleanedAs = delBasePath(as);
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref3 = (0, _url.parse)(cleanedAs),
@@ -1249,18 +1252,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
                     .then(function(routeInfo) {
                       var error = routeInfo.error;
 
-                      if (error && error.cancelled) {
+                      if (error && error.aborted) {
+                        error.cancelled = false;
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1272,11 +1281,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1336,14 +1349,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
                       // So, we need to mark it as a cancelled error and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
                       });
                     }
 
-                    if (err.cancelled) {
+                    if (err.aborted) {
                       // @ts-ignore TODO: fix the control flow here
                       return resolve({
                         error: err
@@ -1620,7 +1633,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                   '"'
                                 )
                               );
-                              error.cancelled = true;
+                              error.aborted = true;
                               throw error;
 
                             case 9:
@@ -1668,7 +1681,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                   if (cancelled) {
                     var err = new Error("Loading initial props cancelled");
-                    err.cancelled = true;
+                    err.aborted = true;
                     throw err;
                   }
 
@@ -1694,11 +1707,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.172d49d3883452fb95e2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.8798b0798907d2141894.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.172d49d3883452fb95e2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.172d49d3883452fb95e2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.8798b0798907d2141894.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.172d49d3883452fb95e2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.172d49d3883452fb95e2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.8798b0798907d2141894.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.172d49d3883452fb95e2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.2s 12.3s ⚠️ +125ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +543 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..20f2.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.2 kB ⚠️ +29 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.13 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 915 kB 915 kB ⚠️ +215 B
routerDirect.js 908 kB 908 kB ⚠️ +215 B
withRouter.js 908 kB 908 kB ⚠️ +215 B
Overall change 4.49 MB 4.49 MB ⚠️ +645 B
Commit: 653d388

@ijjk
Copy link
Member

ijjk commented Jul 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.7s 12.5s -250ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +786 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.2 2.213 ⚠️ +0.01
/ avg req/sec 1136.27 1129.58 ⚠️ -6.69
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.464 1.43 -0.03
/error-in-render avg req/sec 1707.92 1748.18 +40.26
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB 10.7 kB ⚠️ +36 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.3 kB ⚠️ +36 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB 7.14 kB ⚠️ +45 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +45 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 953 B -1 B
link.html gzip 958 B 959 B ⚠️ +1 B
withRouter.html gzip 945 B 945 B ✓
Overall change 2.86 kB 2.86 kB ✓

Diffs

Diff for 19b7e98f51cc..13.module.js 
@@ -782,6 +782,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -1004,7 +1005,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
@@ -1012,10 +1015,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
             if (!options._h && this.onlyAHashChange(as)) {
               this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
               this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1048,7 +1051,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               pathname
             );
             var { shallow = false } = options;
-            var cleanedAs = delBasePath(as);
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
@@ -1084,17 +1086,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
+                  // An event already has been fired
+                  return resolve(false);
+                }
+
+                if (error && error.aborted) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1104,11 +1112,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1163,9 +1171,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
@@ -1434,11 +1442,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..079014588.js 
@@ -915,6 +915,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1158,7 +1159,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
@@ -1166,13 +1170,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                   if (!options._h && _this2.onlyAHashChange(as)) {
                     _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
                     _this2.scrollToHash(as);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1209,7 +1213,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var _options$shallow = options.shallow,
                     shallow =
                       _options$shallow === void 0 ? false : _options$shallow;
-                  var cleanedAs = delBasePath(as);
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref3 = (0, _url.parse)(cleanedAs),
@@ -1249,7 +1252,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1257,10 +1260,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
+                        // An event already has been fired
+                        return resolve(false);
+                      }
+
+                      if (error && error.aborted) {
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1272,11 +1285,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1334,9 +1351,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1694,11 +1711,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.a8387e27b3b090e6320e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.45641665db6741746f04.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.a8387e27b3b090e6320e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.a8387e27b3b090e6320e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.45641665db6741746f04.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.a8387e27b3b090e6320e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.a8387e27b3b090e6320e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.45641665db6741746f04.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.a8387e27b3b090e6320e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.3s 13.7s ⚠️ +450ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +786 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..e70d.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.3 kB ⚠️ +36 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.14 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +45 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 915 kB 915 kB ⚠️ +305 B
routerDirect.js 908 kB 908 kB ⚠️ +305 B
withRouter.js 908 kB 908 kB ⚠️ +305 B
Overall change 4.49 MB 4.49 MB ⚠️ +915 B
Commit: 6436350

@ijjk
Copy link
Member

ijjk commented Jul 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.8s 12.5s -243ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +769 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.151 2.127 -0.02
/ avg req/sec 1162.04 1175.5 +13.46
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.458 1.451 -0.01
/error-in-render avg req/sec 1715.16 1722.74 +7.58
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB 10.7 kB ⚠️ +34 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.3 kB ⚠️ +34 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB 7.13 kB ⚠️ +43 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 951 B -3 B
link.html gzip 958 B 958 B ✓
withRouter.html gzip 945 B 943 B -2 B
Overall change 2.86 kB 2.85 kB -5 B

Diffs

Diff for 19b7e98f51cc..13.module.js 
@@ -782,6 +782,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -877,7 +878,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1004,18 +1005,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              this.scrollToHash(cleanedAs);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1048,7 +1051,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               pathname
             );
             var { shallow = false } = options;
-            var cleanedAs = delBasePath(as);
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
@@ -1084,17 +1086,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
+                  // An event already has been fired
+                  return resolve(false);
+                }
+
+                if (error && error.aborted) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1104,11 +1112,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1163,9 +1171,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
@@ -1434,11 +1442,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..079014588.js 
@@ -915,6 +915,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1014,7 +1015,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1158,21 +1159,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1209,7 +1213,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var _options$shallow = options.shallow,
                     shallow =
                       _options$shallow === void 0 ? false : _options$shallow;
-                  var cleanedAs = delBasePath(as);
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref3 = (0, _url.parse)(cleanedAs),
@@ -1249,7 +1252,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1257,10 +1260,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
+                        // An event already has been fired
+                        return resolve(false);
+                      }
+
+                      if (error && error.aborted) {
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1272,11 +1285,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1334,9 +1351,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1694,11 +1711,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.7s 13.9s ⚠️ +211ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +769 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..8d01.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.3 kB ⚠️ +34 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.13 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 915 kB 915 kB ⚠️ +313 B
routerDirect.js 908 kB 908 kB ⚠️ +313 B
withRouter.js 908 kB 908 kB ⚠️ +313 B
Overall change 4.49 MB 4.49 MB ⚠️ +939 B
Commit: c591343

@ijjk
Copy link
Member

ijjk commented Jul 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.4s 12.4s ⚠️ +41ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +783 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.071 2.01 -0.06
/ avg req/sec 1207.35 1243.82 +36.47
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.244 1.23 -0.01
/error-in-render avg req/sec 2009.69 2033 +23.31
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB 10.7 kB ⚠️ +34 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.3 kB ⚠️ +34 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB 7.13 kB ⚠️ +43 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 951 B -3 B
link.html gzip 958 B 958 B ✓
withRouter.html gzip 945 B 943 B -2 B
Overall change 2.86 kB 2.85 kB -5 B

Diffs

Diff for 19b7e98f51cc..13.module.js 
@@ -782,6 +782,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -877,7 +878,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1004,18 +1005,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              this.scrollToHash(cleanedAs);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1048,7 +1051,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               pathname
             );
             var { shallow = false } = options;
-            var cleanedAs = delBasePath(as);
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
@@ -1084,17 +1086,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
+                  // An event already has been fired
+                  return resolve(false);
+                }
+
+                if (error && error.aborted) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1104,11 +1112,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1163,9 +1171,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
@@ -1434,11 +1442,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..079014588.js 
@@ -915,6 +915,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1014,7 +1015,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1158,21 +1159,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1209,7 +1213,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var _options$shallow = options.shallow,
                     shallow =
                       _options$shallow === void 0 ? false : _options$shallow;
-                  var cleanedAs = delBasePath(as);
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref3 = (0, _url.parse)(cleanedAs),
@@ -1249,7 +1252,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1257,10 +1260,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
+                        // An event already has been fired
+                        return resolve(false);
+                      }
+
+                      if (error && error.aborted) {
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1272,11 +1285,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1334,9 +1351,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1694,11 +1711,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.3s 13.5s ⚠️ +193ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +783 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..8d01.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.3 kB ⚠️ +34 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.13 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 915 kB 915 kB ⚠️ +313 B
routerDirect.js 908 kB 908 kB ⚠️ +313 B
withRouter.js 908 kB 908 kB ⚠️ +313 B
Overall change 4.49 MB 4.49 MB ⚠️ +939 B
Commit: c5c41dc

@Janpot Janpot marked this pull request as ready for review July 4, 2020 18:02
@Janpot Janpot mentioned this pull request Jul 5, 2020
Merged
@ijjk
Copy link
Member

ijjk commented Jul 5, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.7s 12.1s -565ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +783 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.157 2.148 -0.01
/ avg req/sec 1159.26 1163.63 +4.37
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.379 1.391 ⚠️ +0.01
/error-in-render avg req/sec 1812.74 1796.67 ⚠️ -16.07
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB 10.7 kB ⚠️ +34 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.3 kB ⚠️ +34 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB 7.13 kB ⚠️ +43 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 951 B -3 B
link.html gzip 958 B 958 B ✓
withRouter.html gzip 945 B 943 B -2 B
Overall change 2.86 kB 2.85 kB -5 B

Diffs

Diff for 19b7e98f51cc..13.module.js 
@@ -782,6 +782,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -877,7 +878,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1004,18 +1005,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              this.scrollToHash(cleanedAs);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1048,7 +1051,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               pathname
             );
             var { shallow = false } = options;
-            var cleanedAs = delBasePath(as);
 
             if ((0, _isDynamic.isDynamicRoute)(route)) {
               var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
@@ -1084,17 +1086,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
+                  // An event already has been fired
+                  return resolve(false);
+                }
+
+                if (error && error.aborted) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1104,11 +1112,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1163,9 +1171,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
@@ -1434,11 +1442,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..079014588.js 
@@ -915,6 +915,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1014,7 +1015,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1158,21 +1159,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1209,7 +1213,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var _options$shallow = options.shallow,
                     shallow =
                       _options$shallow === void 0 ? false : _options$shallow;
-                  var cleanedAs = delBasePath(as);
 
                   if ((0, _isDynamic.isDynamicRoute)(route)) {
                     var _ref3 = (0, _url.parse)(cleanedAs),
@@ -1249,7 +1252,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1257,10 +1260,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
+                        // An event already has been fired
+                        return resolve(false);
+                      }
+
+                      if (error && error.aborted) {
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1272,11 +1285,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1334,9 +1351,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1694,11 +1711,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.15dc873ded6079014588.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.95ca912efa9c2b3f6df0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12a66c28dfec2bca8613.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f56b92a8e921414e1596.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.8s 13.8s ⚠️ +11ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +783 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..18e4.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..8d01.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.3 kB ⚠️ +34 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.09 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.13 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 915 kB 915 kB ⚠️ +313 B
routerDirect.js 908 kB 908 kB ⚠️ +313 B
withRouter.js 908 kB 908 kB ⚠️ +313 B
Overall change 4.49 MB 4.49 MB ⚠️ +939 B
Commit: 524cc41

kodiakhq bot pushed a commit that referenced this pull request Jul 7, 2020
@Janpot
Fix basepath browser back/forward issue (#14861)
3623d44 
Discovered while working on #14848

when asPath is the same but href is different it should use `replaceState` instead of `pushState`, so that browser back/forward behavior is preserved. Currently it's comparing a path that includes basepath with one that excludes  it, so `pushState` is always used. This makes sure the behavior is the same as when running next.js without a basepath
@ijjk
Copy link
Member

ijjk commented Jul 7, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 11.7s 11.7s -35ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +765 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.77 1.948 ⚠️ +0.18
/ avg req/sec 1412.77 1283.37 ⚠️ -129.4
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.091 1.296 ⚠️ +0.21
/error-in-render avg req/sec 2291.3 1929.48 ⚠️ -361.82
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..c646.js gzip 10.7 kB 10.7 kB ⚠️ +30 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.3 kB ⚠️ +30 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB 7.13 kB ⚠️ +38 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 954 B 954 B ✓
link.html gzip 960 B 960 B ✓
withRouter.html gzip 945 B 946 B ⚠️ +1 B
Overall change 2.86 kB 2.86 kB ⚠️ +1 B

Diffs

Diff for 19b7e98f51cc..73.module.js 
@@ -784,6 +784,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -879,7 +880,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1011,18 +1012,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            this.abortComponentLoad();
+            var cleanedAs = delBasePath(as);
+            this._lastStarted = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              this.scrollToHash(cleanedAs);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1041,9 +1044,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
 
               return resolve(false);
-            }
-
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+            } // If asked to change the current URL we should reload the current page
             // (not location.reload() but reload getInitialProps and other Next.js stuffs)
             // We also need to set the method = replaceState always
             // as this should not go into the history (That's how browsers work)
@@ -1092,17 +1093,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
+                  // An event already has been fired
+                  return resolve(false);
+                }
+
+                if (error && error.aborted) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1112,14 +1119,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
                     if (false) {
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1174,9 +1181,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
@@ -1445,11 +1452,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           });
         }
 
-        abortComponentLoad(as) {
+        abortComponentLoad() {
           if (this.clc) {
             var e = new Error("Route Cancelled");
             e.cancelled = true;
-            Router.events.emit("routeChangeError", e, as);
+            Router.events.emit("routeChangeError", e, this._lastStarted);
             this.clc();
             this.clc = null;
           }
Diff for 19b7e98f51cc..d0645a966.js 
@@ -917,6 +917,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._lastStarted = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1016,7 +1017,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1165,21 +1166,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  _this2.abortComponentLoad();
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._lastStarted = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1201,9 +1205,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
 
                     return resolve(false);
-                  }
-
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+                  } // If asked to change the current URL we should reload the current page
                   // (not location.reload() but reload getInitialProps and other Next.js stuffs)
                   // We also need to set the method = replaceState always
                   // as this should not go into the history (That's how browsers work)
@@ -1257,7 +1259,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1265,10 +1267,20 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
+                        // An event already has been fired
+                        return resolve(false);
+                      }
+
+                      if (error && error.aborted) {
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1280,14 +1292,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
                           if (false) {
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1345,9 +1361,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1705,11 +1721,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "abortComponentLoad",
-              value: function abortComponentLoad(as) {
+              value: function abortComponentLoad() {
                 if (this.clc) {
                   var e = new Error("Route Cancelled");
                   e.cancelled = true;
-                  Router.events.emit("routeChangeError", e, as);
+                  Router.events.emit("routeChangeError", e, this._lastStarted);
                   this.clc();
                   this.clc = null;
                 }
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.402fbe267102a33ec7f4.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.44b04996f7f93ca94351.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.402fbe267102a33ec7f4.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.402fbe267102a33ec7f4.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.44b04996f7f93ca94351.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.402fbe267102a33ec7f4.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.402fbe267102a33ec7f4.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.44b04996f7f93ca94351.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.402fbe267102a33ec7f4.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.4s 12.6s ⚠️ +219ms
nodeModulesSize 66.1 MB 66.1 MB ⚠️ +765 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..c646.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..17f8.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.3 kB ⚠️ +30 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.71 kB 5.71 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.13 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 877 kB 877 kB ✓
link.js 915 kB 915 kB ⚠️ +313 B
routerDirect.js 909 kB 909 kB ⚠️ +313 B
withRouter.js 909 kB 909 kB ⚠️ +313 B
Overall change 4.49 MB 4.49 MB ⚠️ +939 B
Commit: d574379

@ijjk
Copy link
Member

ijjk commented Jul 10, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.6s 12.5s -100ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +1.03 kB
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.187 2.211 ⚠️ +0.02
/ avg req/sec 1142.87 1130.73 ⚠️ -12.14
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.537 1.489 -0.05
/error-in-render avg req/sec 1626.68 1679.1 +52.42
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.7 kB ⚠️ +44 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.3 kB ⚠️ +44 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.72 kB 5.72 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB 7.15 kB ⚠️ +50 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.8 kB ⚠️ +50 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 953 B 952 B -1 B
link.html gzip 961 B 960 B -1 B
withRouter.html gzip 945 B 946 B ⚠️ +1 B
Overall change 2.86 kB 2.86 kB -1 B

Diffs

Diff for 19b7e98f51cc..b697ae7df.js 
@@ -921,6 +921,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1020,7 +1021,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1169,21 +1170,26 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  if (_this2._inFlightRoute) {
+                    _this2.abortComponentLoad(_this2._inFlightRoute);
+                  }
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._inFlightRoute = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
-                    Router.events.emit("hashChangeComplete", as);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
                     return resolve(true);
                   }
 
@@ -1205,9 +1211,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
 
                     return resolve(false);
-                  }
-
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+                  } // If asked to change the current URL we should reload the current page
                   // (not location.reload() but reload getInitialProps and other Next.js stuffs)
                   // We also need to set the method = replaceState always
                   // as this should not go into the history (That's how browsers work)
@@ -1261,7 +1265,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
                   _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
@@ -1269,10 +1273,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
+                        // An event already has been fired
                         return resolve(false);
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      if (error && error.aborted) {
+                        delete error.aborted;
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
+                        return resolve(false);
+                      }
+
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1284,14 +1299,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
                           if (false) {
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
                           return resolve(true);
                         });
                     }, reject);
@@ -1349,9 +1368,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
Diff for 19b7e98f51cc..de.module.js 
@@ -788,6 +788,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -883,7 +884,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1015,18 +1016,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            if (this._inFlightRoute) {
+              this.abortComponentLoad(this._inFlightRoute);
+            }
+
+            var cleanedAs = delBasePath(as);
+            this._inFlightRoute = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
+              this.scrollToHash(cleanedAs);
+              Router.events.emit("hashChangeComplete", cleanedAs);
               return resolve(true);
             }
 
@@ -1045,9 +1051,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
 
               return resolve(false);
-            }
-
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+            } // If asked to change the current URL we should reload the current page
             // (not location.reload() but reload getInitialProps and other Next.js stuffs)
             // We also need to set the method = replaceState always
             // as this should not go into the history (That's how browsers work)
@@ -1096,17 +1100,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
             this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
+                  // An event already has been fired
+                  return resolve(false);
+                }
+
+                if (error && error.aborted) {
+                  delete error.aborted;
+                  Router.events.emit("routeChangeError", error, cleanedAs);
                   return resolve(false);
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
@@ -1116,14 +1127,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 this.set(route, pathname, query, cleanedAs, routeInfo).then(
                   () => {
                     if (error) {
-                      Router.events.emit("routeChangeError", error, as);
+                      Router.events.emit("routeChangeError", error, cleanedAs);
                       throw error;
                     }
 
                     if (false) {
                     }
 
-                    Router.events.emit("routeChangeComplete", as);
+                    Router.events.emit("routeChangeComplete", cleanedAs);
                     return resolve(true);
                   }
                 );
@@ -1178,9 +1189,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err.aborted = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12f85ede652c493a7a19.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ab3910eb81ea4fa3a7c0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12f85ede652c493a7a19.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12f85ede652c493a7a19.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ab3910eb81ea4fa3a7c0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12f85ede652c493a7a19.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12f85ede652c493a7a19.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ab3910eb81ea4fa3a7c0.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.12f85ede652c493a7a19.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.6s 13.7s ⚠️ +188ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +1.03 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..e4a8.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..4d81.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.3 kB ⚠️ +44 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.72 kB 5.72 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.15 kB N/A
Overall change 52.7 kB 52.8 kB ⚠️ +50 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 877 kB 877 kB ✓
link.js 916 kB 916 kB ⚠️ +399 B
routerDirect.js 910 kB 910 kB ⚠️ +399 B
withRouter.js 910 kB 910 kB ⚠️ +399 B
Overall change 4.5 MB 4.5 MB ⚠️ +1.2 kB
Commit: 604abf0

@ijjk
Copy link
Member

ijjk commented Jul 11, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 10.9s 10.7s -257ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +191 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.747 1.836 ⚠️ +0.09
/ avg req/sec 1431.28 1361.68 ⚠️ -69.6
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.139 1.114 -0.02
/error-in-render avg req/sec 2194.41 2244.61 +50.2
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.9 kB ⚠️ +192 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.4 kB ⚠️ +192 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.72 kB 5.72 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB 7.13 kB ⚠️ +31 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB ⚠️ +31 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 953 B 955 B ⚠️ +2 B
link.html gzip 961 B 960 B -1 B
withRouter.html gzip 945 B 945 B ✓
Overall change 2.86 kB 2.86 kB ⚠️ +1 B

Diffs

Diff for 19b7e98f51cc..b697ae7df.js 
@@ -765,12 +765,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
     /***/ elyg: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
+      var _slicedToArray = __webpack_require__("J4zp");
+
       var _regeneratorRuntime = __webpack_require__("o0o1");
 
       var _asyncToGenerator = __webpack_require__("yXPU");
 
-      var _slicedToArray = __webpack_require__("J4zp");
-
       var _classCallCheck = __webpack_require__("lwsE");
 
       var _createClass = __webpack_require__("W8MJ");
@@ -804,6 +804,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -921,6 +922,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -1020,7 +1022,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1152,151 +1154,281 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "change",
-              value: function change(method, url, as, options) {
-                var _this2 = this;
+              value: (function() {
+                var _change = _asyncToGenerator(
+                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee(
+                    method,
+                    url,
+                    as,
+                    options
+                  ) {
+                    var rewriteUrlForNextExport,
+                      cleanedAs,
+                      _ref2,
+                      pathname,
+                      query,
+                      protocol,
+                      route,
+                      _options$shallow,
+                      shallow,
+                      _ref3,
+                      asPathname,
+                      routeRegex,
+                      routeMatch,
+                      missingParams,
+                      routeInfo,
+                      error,
+                      appComp;
 
-                return new Promise(function(resolve, reject) {
-                  if (!options._h) {
-                    _this2.isSsr = false;
-                  } // marking route changes as a navigation start entry
+                    return _regeneratorRuntime.wrap(
+                      function _callee$(_context) {
+                        while (1) {
+                          switch ((_context.prev = _context.next)) {
+                            case 0:
+                              if (!options._h) {
+                                this.isSsr = false;
+                              } // marking route changes as a navigation start entry
 
-                  if (_utils.ST) {
-                    performance.mark("routeChange");
-                  } // Add the ending slash to the paths. So, we can serve the
-                  // "<page>/index.html" directly for the SSR page.
+                              if (_utils.ST) {
+                                performance.mark("routeChange");
+                              } // Add the ending slash to the paths. So, we can serve the
+                              // "<page>/index.html" directly for the SSR page.
 
-                  if (false) {
-                    var rewriteUrlForNextExport;
-                  }
+                              if (false) {
+                              }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
-                  // We should not proceed. We should only change the state.
-                  // WARNING: `_h` is an internal option for handing Next.js client-side
-                  // hydration. Your app should _never_ use this property. It may change at
-                  // any time without notice.
+                              if (this._inFlightRoute) {
+                                this.abortComponentLoad(this._inFlightRoute);
+                              }
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                              cleanedAs = delBasePath(as);
+                              this._inFlightRoute = cleanedAs; // If the url change is only related to a hash change
+                              // We should not proceed. We should only change the state.
+                              // WARNING: `_h` is an internal option for handing Next.js client-side
+                              // hydration. Your app should _never_ use this property. It may change at
+                              // any time without notice.
 
-                    _this2.changeState(method, url, as, options);
+                              if (
+                                !(
+                                  !options._h && this.onlyAHashChange(cleanedAs)
+                                )
+                              ) {
+                                _context.next = 13;
+                                break;
+                              }
 
-                    _this2.scrollToHash(as);
+                              this.asPath = cleanedAs;
+                              Router.events.emit("hashChangeStart", cleanedAs);
+                              this.changeState(method, url, as, options);
+                              this.scrollToHash(cleanedAs);
+                              Router.events.emit(
+                                "hashChangeComplete",
+                                cleanedAs
+                              );
+                              return _context.abrupt("return", true);
+
+                            case 13:
+                              (_ref2 = (0, _url.parse)(url, true)),
+                                (pathname = _ref2.pathname),
+                                (query = _ref2.query),
+                                (protocol = _ref2.protocol); // url and as should always be prefixed with basePath by this
+                              // point by either next/link or router.push/replace so strip the
+                              // basePath from the pathname to match the pages dir 1-to-1
+
+                              pathname = pathname
+                                ? (0,
+                                  _normalizeTrailingSlash.removePathTrailingSlash)(
+                                    delBasePath(pathname)
+                                  )
+                                : pathname;
+
+                              if (!(!pathname || protocol)) {
+                                _context.next = 19;
+                                break;
+                              }
 
-                    Router.events.emit("hashChangeComplete", as);
-                    return resolve(true);
-                  }
+                              if (true) {
+                                _context.next = 18;
+                                break;
+                              }
 
-                  var _ref2 = (0, _url.parse)(url, true),
-                    pathname = _ref2.pathname,
-                    query = _ref2.query,
-                    protocol = _ref2.protocol; // url and as should always be prefixed with basePath by this
-                  // point by either next/link or router.push/replace so strip the
-                  // basePath from the pathname to match the pages dir 1-to-1
+                              throw new Error(
+                                "Invalid href passed to router: ".concat(
+                                  url,
+                                  " https://err.sh/vercel/next.js/invalid-href-passed"
+                                )
+                              );
 
-                  pathname = pathname
-                    ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                        delBasePath(pathname)
-                      )
-                    : pathname;
+                            case 18:
+                              return _context.abrupt("return", false);
+
+                            case 19:
+                              // If asked to change the current URL we should reload the current page
+                              // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+                              // We also need to set the method = replaceState always
+                              // as this should not go into the history (That's how browsers work)
+                              // We should compare the new asPath to the current asPath, not the url
+                              if (!this.urlIsNew(cleanedAs)) {
+                                method = "replaceState";
+                              }
 
-                  if (!pathname || protocol) {
-                    if (false) {
-                    }
+                              route = (0,
+                              _normalizeTrailingSlash.removePathTrailingSlash)(
+                                pathname
+                              );
+                              (_options$shallow = options.shallow),
+                                (shallow =
+                                  _options$shallow === void 0
+                                    ? false
+                                    : _options$shallow);
+
+                              if (!(0, _isDynamic.isDynamicRoute)(route)) {
+                                _context.next = 34;
+                                break;
+                              }
 
-                    return resolve(false);
-                  }
+                              (_ref3 = (0, _url.parse)(cleanedAs)),
+                                (asPathname = _ref3.pathname);
+                              routeRegex = (0, _routeRegex.getRouteRegex)(
+                                route
+                              );
+                              routeMatch = (0, _routeMatcher.getRouteMatcher)(
+                                routeRegex
+                              )(asPathname);
 
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-                  // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-                  // We also need to set the method = replaceState always
-                  // as this should not go into the history (That's how browsers work)
-                  // We should compare the new asPath to the current asPath, not the url
+                              if (routeMatch) {
+                                _context.next = 33;
+                                break;
+                              }
 
-                  if (!_this2.urlIsNew(cleanedAs)) {
-                    method = "replaceState";
-                  }
+                              missingParams = Object.keys(
+                                routeRegex.groups
+                              ).filter(function(param) {
+                                return !query[param];
+                              });
 
-                  var route = (0,
-                  _normalizeTrailingSlash.removePathTrailingSlash)(pathname);
-                  var _options$shallow = options.shallow,
-                    shallow =
-                      _options$shallow === void 0 ? false : _options$shallow;
-
-                  if ((0, _isDynamic.isDynamicRoute)(route)) {
-                    var _ref3 = (0, _url.parse)(cleanedAs),
-                      asPathname = _ref3.pathname;
-
-                    var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-                    var routeMatch = (0, _routeMatcher.getRouteMatcher)(
-                      routeRegex
-                    )(asPathname);
-
-                    if (!routeMatch) {
-                      var missingParams = Object.keys(routeRegex.groups).filter(
-                        function(param) {
-                          return !query[param];
-                        }
-                      );
+                              if (!(missingParams.length > 0)) {
+                                _context.next = 31;
+                                break;
+                              }
 
-                      if (missingParams.length > 0) {
-                        if (false) {
-                        }
+                              if (false) {
+                              }
 
-                        return reject(
-                          new Error(
-                            "The provided `as` value ("
-                              .concat(
-                                asPathname,
-                                ") is incompatible with the `href` value ("
-                              )
-                              .concat(route, "). ") +
-                              "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                          )
-                        );
-                      }
-                    } else {
-                      // Merge params into `query`, overwriting any specified in search
-                      Object.assign(query, routeMatch);
-                    }
-                  }
+                              throw new Error(
+                                "The provided `as` value ("
+                                  .concat(
+                                    asPathname,
+                                    ") is incompatible with the `href` value ("
+                                  )
+                                  .concat(route, "). ") +
+                                  "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                              );
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                            case 31:
+                              _context.next = 34;
+                              break;
 
-                  _this2
-                    .getRouteInfo(route, pathname, query, as, shallow)
-                    .then(function(routeInfo) {
-                      var error = routeInfo.error;
+                            case 33:
+                              // Merge params into `query`, overwriting any specified in search
+                              Object.assign(query, routeMatch);
 
-                      if (error && error.cancelled) {
-                        return resolve(false);
-                      }
+                            case 34:
+                              Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-                      Router.events.emit("beforeHistoryChange", as);
+                              _context.next = 37;
+                              return this.getRouteInfo(
+                                route,
+                                pathname,
+                                query,
+                                as,
+                                shallow
+                              );
 
-                      _this2.changeState(method, url, as, options);
+                            case 37:
+                              routeInfo = _context.sent;
+                              error = routeInfo.error;
 
-                      if (false) {
-                        var appComp;
-                      }
+                              if (!(error && error.cancelled)) {
+                                _context.next = 41;
+                                break;
+                              }
 
-                      _this2
-                        .set(route, pathname, query, cleanedAs, routeInfo)
-                        .then(function() {
-                          if (error) {
-                            Router.events.emit("routeChangeError", error, as);
-                            throw error;
-                          }
+                              return _context.abrupt("return", false);
+
+                            case 41:
+                              if (!(error && error[ABORTED])) {
+                                _context.next = 44;
+                                break;
+                              }
+
+                              Router.events.emit(
+                                "routeChangeError",
+                                error,
+                                cleanedAs
+                              );
+                              return _context.abrupt("return", false);
+
+                            case 44:
+                              Router.events.emit(
+                                "beforeHistoryChange",
+                                cleanedAs
+                              );
+                              this.changeState(method, url, as, options);
+
+                              if (false) {
+                              }
+
+                              _context.next = 49;
+                              return this.set(
+                                route,
+                                pathname,
+                                query,
+                                cleanedAs,
+                                routeInfo
+                              );
+
+                            case 49:
+                              if (!error) {
+                                _context.next = 52;
+                                break;
+                              }
+
+                              Router.events.emit(
+                                "routeChangeError",
+                                error,
+                                cleanedAs
+                              );
+                              throw error;
+
+                            case 52:
+                              if (false) {
+                              }
+
+                              Router.events.emit(
+                                "routeChangeComplete",
+                                cleanedAs
+                              );
+                              return _context.abrupt("return", true);
 
-                          if (false) {
+                            case 55:
+                            case "end":
+                              return _context.stop();
                           }
+                        }
+                      },
+                      _callee,
+                      this
+                    );
+                  })
+                );
 
-                          Router.events.emit("routeChangeComplete", as);
-                          return resolve(true);
-                        });
-                    }, reject);
-                });
-              }
+                function change(_x, _x2, _x3, _x4) {
+                  return _change.apply(this, arguments);
+                }
+
+                return change;
+              })()
             },
             {
               key: "changeState",
@@ -1327,7 +1459,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             {
               key: "getRouteInfo",
               value: function getRouteInfo(route, pathname, query, as) {
-                var _this3 = this;
+                var _this2 = this;
 
                 var shallow =
                   arguments.length > 4 && arguments[4] !== undefined
@@ -1349,9 +1481,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1366,7 +1498,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
 
                     resolve(
-                      _this3
+                      _this2
                         .fetchComponent("/_error")
                         .then(function(res) {
                           var Component = res.page;
@@ -1375,7 +1507,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             err: err
                           };
                           return new Promise(function(resolveRouteInfo) {
-                            _this3
+                            _this2
                               .getInitialProps(Component, {
                                 err: err,
                                 pathname: pathname,
@@ -1411,7 +1543,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     return resolve(cachedRouteInfo);
                   }
 
-                  _this3.fetchComponent(route).then(function(res) {
+                  _this2.fetchComponent(route).then(function(res) {
                     return resolve({
                       Component: res.page,
                       __N_SSG: res.mod.__N_SSG,
@@ -1431,7 +1563,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var dataHref;
 
                     if (__N_SSG || __N_SSP) {
-                      dataHref = _this3.pageLoader.getDataHref(
+                      dataHref = _this2.pageLoader.getDataHref(
                         (0, _utils.formatWithValidation)({
                           pathname: pathname,
                           query: query
@@ -1441,13 +1573,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       );
                     }
 
-                    return _this3
+                    return _this2
                       ._getData(function() {
                         return __N_SSG
-                          ? _this3._getStaticData(dataHref)
+                          ? _this2._getStaticData(dataHref)
                           : __N_SSP
-                          ? _this3._getServerData(dataHref)
-                          : _this3.getInitialProps(
+                          ? _this2._getServerData(dataHref)
+                          : _this2.getInitialProps(
                               Component, // we provide AppTree later so this needs to be `any`
                               {
                                 pathname: pathname,
@@ -1458,7 +1590,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       })
                       .then(function(props) {
                         routeInfo.props = props;
-                        _this3.components[route] = routeInfo;
+                        _this2.components[route] = routeInfo;
                         return routeInfo;
                       });
                   })
@@ -1561,7 +1693,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             {
               key: "prefetch",
               value: function prefetch(url) {
-                var _this4 = this;
+                var _this3 = this;
 
                 var asPath =
                   arguments.length > 1 && arguments[1] !== undefined
@@ -1589,8 +1721,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var route = (0,
                   _normalizeTrailingSlash.removePathTrailingSlash)(pathname);
                   Promise.all([
-                    _this4.pageLoader.prefetchData(url, asPath),
-                    _this4.pageLoader[
+                    _this3.pageLoader.prefetchData(url, asPath),
+                    _this3.pageLoader[
                       options.priority ? "loadPage" : "prefetch"
                     ](route)
                   ]).then(function() {
@@ -1603,14 +1735,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               key: "fetchComponent",
               value: (function() {
                 var _fetchComponent = _asyncToGenerator(
-                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee(
+                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee2(
                     route
                   ) {
                     var cancelled, cancel, componentResult, error;
                     return _regeneratorRuntime.wrap(
-                      function _callee$(_context) {
+                      function _callee2$(_context2) {
                         while (1) {
-                          switch ((_context.prev = _context.next)) {
+                          switch ((_context2.prev = _context2.next)) {
                             case 0:
                               cancelled = false;
 
@@ -1618,14 +1750,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 cancelled = true;
                               };
 
-                              _context.next = 4;
+                              _context2.next = 4;
                               return this.pageLoader.loadPage(route);
 
                             case 4:
-                              componentResult = _context.sent;
+                              componentResult = _context2.sent;
 
                               if (!cancelled) {
-                                _context.next = 9;
+                                _context2.next = 9;
                                 break;
                               }
 
@@ -1643,21 +1775,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 this.clc = null;
                               }
 
-                              return _context.abrupt("return", componentResult);
+                              return _context2.abrupt(
+                                "return",
+                                componentResult
+                              );
 
                             case 11:
                             case "end":
-                              return _context.stop();
+                              return _context2.stop();
                           }
                         }
                       },
-                      _callee,
+                      _callee2,
                       this
                     );
                   })
                 );
 
-                function fetchComponent(_x) {
+                function fetchComponent(_x5) {
                   return _fetchComponent.apply(this, arguments);
                 }
 
@@ -1667,7 +1802,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             {
               key: "_getData",
               value: function _getData(fn) {
-                var _this5 = this;
+                var _this4 = this;
 
                 var cancelled = false;
 
@@ -1677,8 +1812,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                 this.clc = cancel;
                 return fn().then(function(data) {
-                  if (cancel === _this5.clc) {
-                    _this5.clc = null;
+                  if (cancel === _this4.clc) {
+                    _this4.clc = null;
                   }
 
                   if (cancelled) {
Diff for 19b7e98f51cc..de.module.js 
@@ -674,6 +674,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -788,6 +789,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -883,7 +885,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1000,137 +1002,142 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           return this.change("replaceState", url, as, options);
         }
 
-        change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
-            if (!options._h) {
-              this.isSsr = false;
-            } // marking route changes as a navigation start entry
+        async change(method, url, as, options) {
+          if (!options._h) {
+            this.isSsr = false;
+          } // marking route changes as a navigation start entry
 
-            if (_utils.ST) {
-              performance.mark("routeChange");
-            } // Add the ending slash to the paths. So, we can serve the
-            // "<page>/index.html" directly for the SSR page.
+          if (_utils.ST) {
+            performance.mark("routeChange");
+          } // Add the ending slash to the paths. So, we can serve the
+          // "<page>/index.html" directly for the SSR page.
 
-            if (false) {
-              var rewriteUrlForNextExport;
-            }
+          if (false) {
+            var rewriteUrlForNextExport;
+          }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
-            // We should not proceed. We should only change the state.
-            // WARNING: `_h` is an internal option for handing Next.js client-side
-            // hydration. Your app should _never_ use this property. It may change at
-            // any time without notice.
-
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
-              this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
-            }
+          if (this._inFlightRoute) {
+            this.abortComponentLoad(this._inFlightRoute);
+          }
 
-            var { pathname, query, protocol } = (0, _url.parse)(url, true); // url and as should always be prefixed with basePath by this
-            // point by either next/link or router.push/replace so strip the
-            // basePath from the pathname to match the pages dir 1-to-1
+          var cleanedAs = delBasePath(as);
+          this._inFlightRoute = cleanedAs; // If the url change is only related to a hash change
+          // We should not proceed. We should only change the state.
+          // WARNING: `_h` is an internal option for handing Next.js client-side
+          // hydration. Your app should _never_ use this property. It may change at
+          // any time without notice.
+
+          if (!options._h && this.onlyAHashChange(cleanedAs)) {
+            this.asPath = cleanedAs;
+            Router.events.emit("hashChangeStart", cleanedAs);
+            this.changeState(method, url, as, options);
+            this.scrollToHash(cleanedAs);
+            Router.events.emit("hashChangeComplete", cleanedAs);
+            return true;
+          }
 
-            pathname = pathname
-              ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                  delBasePath(pathname)
-                )
-              : pathname;
+          var { pathname, query, protocol } = (0, _url.parse)(url, true); // url and as should always be prefixed with basePath by this
+          // point by either next/link or router.push/replace so strip the
+          // basePath from the pathname to match the pages dir 1-to-1
 
-            if (!pathname || protocol) {
-              if (false) {
-              }
+          pathname = pathname
+            ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+                delBasePath(pathname)
+              )
+            : pathname;
 
-              return resolve(false);
+          if (!pathname || protocol) {
+            if (false) {
             }
 
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-            // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-            // We also need to set the method = replaceState always
-            // as this should not go into the history (That's how browsers work)
-            // We should compare the new asPath to the current asPath, not the url
+            return false;
+          } // If asked to change the current URL we should reload the current page
+          // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+          // We also need to set the method = replaceState always
+          // as this should not go into the history (That's how browsers work)
+          // We should compare the new asPath to the current asPath, not the url
+
+          if (!this.urlIsNew(cleanedAs)) {
+            method = "replaceState";
+          }
 
-            if (!this.urlIsNew(cleanedAs)) {
-              method = "replaceState";
-            }
+          var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+            pathname
+          );
+          var { shallow = false } = options;
 
-            var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-              pathname
+          if ((0, _isDynamic.isDynamicRoute)(route)) {
+            var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
+            var routeRegex = (0, _routeRegex.getRouteRegex)(route);
+            var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
+              asPathname
             );
-            var { shallow = false } = options;
 
-            if ((0, _isDynamic.isDynamicRoute)(route)) {
-              var { pathname: asPathname } = (0, _url.parse)(cleanedAs);
-              var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-              var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
-                asPathname
+            if (!routeMatch) {
+              var missingParams = Object.keys(routeRegex.groups).filter(
+                param => !query[param]
               );
 
-              if (!routeMatch) {
-                var missingParams = Object.keys(routeRegex.groups).filter(
-                  param => !query[param]
-                );
+              if (missingParams.length > 0) {
+                if (false) {
+                }
 
-                if (missingParams.length > 0) {
-                  if (false) {
-                  }
-
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                throw new Error(
+                  "The provided `as` value ("
+                    .concat(
+                      asPathname,
+                      ") is incompatible with the `href` value ("
                     )
-                  );
-                }
-              } else {
-                // Merge params into `query`, overwriting any specified in search
-                Object.assign(query, routeMatch);
+                    .concat(route, "). ") +
+                    "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                );
               }
+            } else {
+              // Merge params into `query`, overwriting any specified in search
+              Object.assign(query, routeMatch);
             }
+          }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+          Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
-              routeInfo => {
-                var { error } = routeInfo;
+          var routeInfo = await this.getRouteInfo(
+            route,
+            pathname,
+            query,
+            as,
+            shallow
+          );
+          var { error } = routeInfo;
 
-                if (error && error.cancelled) {
-                  return resolve(false);
-                }
+          if (error && error.cancelled) {
+            // An event already has been fired
+            return false;
+          }
+
+          if (error && error[ABORTED]) {
+            Router.events.emit("routeChangeError", error, cleanedAs);
+            return false;
+          }
 
-                Router.events.emit("beforeHistoryChange", as);
-                this.changeState(method, url, as, options);
+          Router.events.emit("beforeHistoryChange", cleanedAs);
+          this.changeState(method, url, as, options);
 
-                if (false) {
-                  var appComp;
-                }
+          if (false) {
+            var appComp;
+          }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
+          await this.set(route, pathname, query, cleanedAs, routeInfo);
 
-                    if (false) {
-                    }
+          if (error) {
+            Router.events.emit("routeChangeError", error, cleanedAs);
+            throw error;
+          }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
-                  }
-                );
-              },
-              reject
-            );
-          });
+          if (false) {
+          }
+
+          Router.events.emit("routeChangeComplete", cleanedAs);
+          return true;
         }
 
         changeState(method, url, as) {
@@ -1178,9 +1185,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f6513a0fafe4599078a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f46c022dfd92e20b7450.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f6513a0fafe4599078a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f6513a0fafe4599078a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f46c022dfd92e20b7450.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f6513a0fafe4599078a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f6513a0fafe4599078a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f46c022dfd92e20b7450.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.f6513a0fafe4599078a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 11.5s 11.5s ⚠️ +6ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +191 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.js gzip 6.63 kB 6.63 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..e4a8.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..3b23.js gzip N/A 10.9 kB N/A
Overall change 57.2 kB 57.4 kB ⚠️ +192 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
main-HASH.module.js gzip 5.72 kB 5.72 kB ✓
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.13 kB N/A
Overall change 52.7 kB 52.7 kB ⚠️ +31 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Janpot/next.js basepath-router-events Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 268 B 268 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 540 B 540 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 876 kB 876 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 877 kB 877 kB ✓
link.js 916 kB 916 kB ⚠️ +36 B
routerDirect.js 910 kB 910 kB ⚠️ +36 B
withRouter.js 910 kB 910 kB ⚠️ +36 B
Overall change 4.5 MB 4.5 MB ⚠️ +108 B
Commit: 5f4f70c

@ijjk
Copy link
Member

ijjk commented Jul 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 11.4s 11.8s ⚠️ +440ms
nodeModulesSize 66.5 MB 66.5 MB ⚠️ +847 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.902 1.924 ⚠️ +0.02
/ avg req/sec 1314.17 1299.4 ⚠️ -14.77
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.152 1.138 -0.01
/error-in-render avg req/sec 2170.12 2197.23 +27.11
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..e4c5.js gzip 9.72 kB 9.75 kB ⚠️ +33 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-b036624..8f8e.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.2 kB 87.2 kB ⚠️ +33 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.12 kB 6.15 kB ⚠️ +27 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-0054fa6..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.7 kB ⚠️ +27 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 947 B 948 B ⚠️ +1 B
link.html gzip 953 B 955 B ⚠️ +2 B
withRouter.html gzip 940 B 941 B ⚠️ +1 B
Overall change 2.84 kB 2.84 kB ⚠️ +4 B

Diffs

Diff for 677f882d2ed8..2e.module.js 
@@ -567,6 +567,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -706,6 +707,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -804,7 +806,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -922,7 +924,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         }
 
         change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
+          return Promise.resolve().then(() => {
             if (!options._h) {
               this.isSsr = false;
             } // marking route changes as a navigation start entry
@@ -936,23 +938,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            if (this._inFlightRoute) {
+              this.abortComponentLoad(this._inFlightRoute);
+            }
+
+            var cleanedAs = delBasePath(as);
+            this._inFlightRoute = cleanedAs; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
+              Router.events.emit("hashChangeStart", cleanedAs);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
+              this.scrollToHash(cleanedAs);
+              Router.events.emit("hashChangeComplete", cleanedAs);
+              return true;
             }
 
             var parsed = tryParseRelativeUrl(url);
-            if (!parsed) return resolve(false);
+            if (!parsed) return false;
             var { pathname, searchParams } = parsed;
             var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
               searchParams
@@ -964,8 +971,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
                   delBasePath(pathname)
                 )
-              : pathname;
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+              : pathname; // If asked to change the current URL we should reload the current page
             // (not location.reload() but reload getInitialProps and other Next.js stuffs)
             // We also need to set the method = replaceState always
             // as this should not go into the history (That's how browsers work)
@@ -997,16 +1003,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   if (false) {
                   }
 
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                    )
+                  throw new Error(
+                    "The provided `as` value ("
+                      .concat(
+                        asPathname,
+                        ") is incompatible with the `href` value ("
+                      )
+                      .concat(route, "). ") +
+                      "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
                   );
                 }
               } else {
@@ -1015,39 +1019,48 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               }
             }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+            Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
+            return this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
-                  return resolve(false);
+                  // An event already has been fired
+                  return false;
                 }
 
-                Router.events.emit("beforeHistoryChange", as);
+                if (error && error[ABORTED]) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
+                  return false;
+                }
+
+                Router.events.emit("beforeHistoryChange", cleanedAs);
                 this.changeState(method, url, as, options);
 
                 if (false) {
                   var appComp;
                 }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
-
-                    if (false) {
-                    }
+                return this.set(
+                  route,
+                  pathname,
+                  query,
+                  cleanedAs,
+                  routeInfo
+                ).then(() => {
+                  if (error) {
+                    Router.events.emit("routeChangeError", error, cleanedAs);
+                    throw error;
+                  }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
+                  if (false) {
                   }
-                );
-              },
-              reject
+
+                  Router.events.emit("routeChangeComplete", cleanedAs);
+                  return true;
+                });
+              }
             );
           });
         }
@@ -1097,9 +1110,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for 677f882d2ed8..d633124e2.js 
@@ -698,6 +698,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -840,6 +841,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -944,7 +946,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1079,7 +1081,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               value: function change(method, url, as, options) {
                 var _this2 = this;
 
-                return new Promise(function(resolve, reject) {
+                return Promise.resolve().then(function() {
                   if (!options._h) {
                     _this2.isSsr = false;
                   } // marking route changes as a navigation start entry
@@ -1093,26 +1095,31 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  if (_this2._inFlightRoute) {
+                    _this2.abortComponentLoad(_this2._inFlightRoute);
+                  }
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._inFlightRoute = cleanedAs; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
+                    Router.events.emit("hashChangeStart", cleanedAs);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
-                    Router.events.emit("hashChangeComplete", as);
-                    return resolve(true);
+                    Router.events.emit("hashChangeComplete", cleanedAs);
+                    return true;
                   }
 
                   var parsed = tryParseRelativeUrl(url);
-                  if (!parsed) return resolve(false);
+                  if (!parsed) return false;
                   var pathname = parsed.pathname,
                     searchParams = parsed.searchParams;
                   var query = (0,
@@ -1124,8 +1131,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
                         delBasePath(pathname)
                       )
-                    : pathname;
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+                    : pathname; // If asked to change the current URL we should reload the current page
                   // (not location.reload() but reload getInitialProps and other Next.js stuffs)
                   // We also need to set the method = replaceState always
                   // as this should not go into the history (That's how browsers work)
@@ -1163,16 +1169,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         if (false) {
                         }
 
-                        return reject(
-                          new Error(
-                            "The provided `as` value ("
-                              .concat(
-                                asPathname,
-                                ") is incompatible with the `href` value ("
-                              )
-                              .concat(route, "). ") +
-                              "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                          )
+                        throw new Error(
+                          "The provided `as` value ("
+                            .concat(
+                              asPathname,
+                              ") is incompatible with the `href` value ("
+                            )
+                            .concat(route, "). ") +
+                            "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
                         );
                       }
                     } else {
@@ -1181,18 +1185,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     }
                   }
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                  Router.events.emit("routeChangeStart", cleanedAs); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-                  _this2
+                  return _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
                     .then(function(routeInfo) {
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
-                        return resolve(false);
+                        // An event already has been fired
+                        return false;
+                      }
+
+                      if (error && error[ABORTED]) {
+                        Router.events.emit(
+                          "routeChangeError",
+                          error,
+                          cleanedAs
+                        );
+                        return false;
                       }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                      Router.events.emit("beforeHistoryChange", cleanedAs);
 
                       _this2.changeState(method, url, as, options);
 
@@ -1200,21 +1214,25 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         var appComp;
                       }
 
-                      _this2
+                      return _this2
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
                           if (false) {
                           }
 
-                          Router.events.emit("routeChangeComplete", as);
-                          return resolve(true);
+                          Router.events.emit("routeChangeComplete", cleanedAs);
+                          return true;
                         });
-                    }, reject);
+                    });
                 });
               }
             },
@@ -1269,9 +1287,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9f7b106df0e647b8e12e.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3643eef9ec245dd2d952.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.f3d7eff62a4d633124e2.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.87240d40d86fc139ae95.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9f7b106df0e647b8e12e.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3643eef9ec245dd2d952.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9f7b106df0e647b8e12e.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3643eef9ec245dd2d952.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.f3d7eff62a4d633124e2.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.87240d40d86fc139ae95.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9f7b106df0e647b8e12e.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3643eef9ec245dd2d952.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9f7b106df0e647b8e12e.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3643eef9ec245dd2d952.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.f3d7eff62a4d633124e2.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.87240d40d86fc139ae95.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9f7b106df0e647b8e12e.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3643eef9ec245dd2d952.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.3s 13.3s ⚠️ +952ms
nodeModulesSize 66.5 MB 66.5 MB ⚠️ +847 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..e4c5.js gzip 9.72 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-b036624..8f8e.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
677f882d2ed8..5795.js gzip N/A 9.75 kB N/A
Overall change 87.2 kB 87.2 kB ⚠️ +33 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.12 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-0054fa6..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
677f882d2ed8..dule.js gzip N/A 6.15 kB N/A
Overall change 82.6 kB 82.7 kB ⚠️ +27 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 882 kB 882 kB ✓
link.js 923 kB 923 kB ⚠️ +352 B
routerDirect.js 917 kB 917 kB ⚠️ +352 B
withRouter.js 917 kB 917 kB ⚠️ +352 B
Overall change 4.53 MB 4.53 MB ⚠️ +1.06 kB
Commit: 6b31288

@Janpot Janpot requested a review from chibicode as a code owner July 20, 2020 15:19
@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 11.9s 12.3s ⚠️ +428ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +763 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.927 1.938 ⚠️ +0.01
/ avg req/sec 1297.26 1289.8 ⚠️ -7.46
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.166 1.188 ⚠️ +0.02
/error-in-render avg req/sec 2143.75 2104.14 ⚠️ -39.61
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB 9.73 kB ⚠️ +33 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-35b59ab..f28f.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.1 kB 87.2 kB ⚠️ +33 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB 6.12 kB ⚠️ +27 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-0e6fc45..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ⚠️ +27 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 948 B 947 B -1 B
link.html gzip 955 B 954 B -1 B
withRouter.html gzip 941 B 940 B -1 B
Overall change 2.84 kB 2.84 kB -3 B

Diffs

Diff for 677f882d2ed8..71e43f121.js 
@@ -698,6 +698,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -830,6 +831,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -918,7 +920,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1053,7 +1055,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               value: function change(method, url, as, options) {
                 var _this2 = this;
 
-                return new Promise(function(resolve, reject) {
+                return Promise.resolve().then(function() {
                   if (!options._h) {
                     _this2.isSsr = false;
                   } // marking route changes as a navigation start entry
@@ -1067,26 +1069,31 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  if (_this2._inFlightRoute) {
+                    _this2.abortComponentLoad(_this2._inFlightRoute);
+                  }
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._inFlightRoute = as; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
                     Router.events.emit("hashChangeStart", as);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
                     Router.events.emit("hashChangeComplete", as);
-                    return resolve(true);
+                    return true;
                   }
 
                   var parsed = tryParseRelativeUrl(url);
-                  if (!parsed) return resolve(false);
+                  if (!parsed) return false;
                   var pathname = parsed.pathname,
                     searchParams = parsed.searchParams;
                   var query = (0,
@@ -1098,8 +1105,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
                         delBasePath(pathname)
                       )
-                    : pathname;
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+                    : pathname; // If asked to change the current URL we should reload the current page
                   // (not location.reload() but reload getInitialProps and other Next.js stuffs)
                   // We also need to set the method = replaceState always
                   // as this should not go into the history (That's how browsers work)
@@ -1137,16 +1143,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         if (false) {
                         }
 
-                        return reject(
-                          new Error(
-                            "The provided `as` value ("
-                              .concat(
-                                asPathname,
-                                ") is incompatible with the `href` value ("
-                              )
-                              .concat(route, "). ") +
-                              "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                          )
+                        throw new Error(
+                          "The provided `as` value ("
+                            .concat(
+                              asPathname,
+                              ") is incompatible with the `href` value ("
+                            )
+                            .concat(route, "). ") +
+                            "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
                         );
                       }
                     } else {
@@ -1157,13 +1161,19 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                   Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-                  _this2
+                  return _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
                     .then(function(routeInfo) {
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
-                        return resolve(false);
+                        // An event already has been fired
+                        return false;
+                      }
+
+                      if (error && error[ABORTED]) {
+                        Router.events.emit("routeChangeError", error, as);
+                        return false;
                       }
 
                       Router.events.emit("beforeHistoryChange", as);
@@ -1174,11 +1184,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         var appComp;
                       }
 
-                      _this2
+                      return _this2
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
@@ -1186,9 +1200,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                           }
 
                           Router.events.emit("routeChangeComplete", as);
-                          return resolve(true);
+                          return true;
                         });
-                    }, reject);
+                    });
                 });
               }
             },
@@ -1243,9 +1257,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
Diff for 677f882d2ed8..ce.module.js 
@@ -567,6 +567,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -694,6 +695,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -774,7 +776,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -892,7 +894,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         }
 
         change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
+          return Promise.resolve().then(() => {
             if (!options._h) {
               this.isSsr = false;
             } // marking route changes as a navigation start entry
@@ -906,23 +908,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            if (this._inFlightRoute) {
+              this.abortComponentLoad(this._inFlightRoute);
+            }
+
+            var cleanedAs = delBasePath(as);
+            this._inFlightRoute = as; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
               Router.events.emit("hashChangeStart", as);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
+              this.scrollToHash(cleanedAs);
               Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
+              return true;
             }
 
             var parsed = tryParseRelativeUrl(url);
-            if (!parsed) return resolve(false);
+            if (!parsed) return false;
             var { pathname, searchParams } = parsed;
             var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
               searchParams
@@ -934,8 +941,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
                   delBasePath(pathname)
                 )
-              : pathname;
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+              : pathname; // If asked to change the current URL we should reload the current page
             // (not location.reload() but reload getInitialProps and other Next.js stuffs)
             // We also need to set the method = replaceState always
             // as this should not go into the history (That's how browsers work)
@@ -967,16 +973,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   if (false) {
                   }
 
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                    )
+                  throw new Error(
+                    "The provided `as` value ("
+                      .concat(
+                        asPathname,
+                        ") is incompatible with the `href` value ("
+                      )
+                      .concat(route, "). ") +
+                      "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
                   );
                 }
               } else {
@@ -987,12 +991,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
             Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
+            return this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
-                  return resolve(false);
+                  // An event already has been fired
+                  return false;
+                }
+
+                if (error && error[ABORTED]) {
+                  Router.events.emit("routeChangeError", error, as);
+                  return false;
                 }
 
                 Router.events.emit("beforeHistoryChange", as);
@@ -1002,22 +1012,25 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var appComp;
                 }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
-
-                    if (false) {
-                    }
+                return this.set(
+                  route,
+                  pathname,
+                  query,
+                  cleanedAs,
+                  routeInfo
+                ).then(() => {
+                  if (error) {
+                    Router.events.emit("routeChangeError", error, cleanedAs);
+                    throw error;
+                  }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
+                  if (false) {
                   }
-                );
-              },
-              reject
+
+                  Router.events.emit("routeChangeComplete", as);
+                  return true;
+                });
+              }
             );
           });
         }
@@ -1067,9 +1080,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ec061f1418ee46c4da93.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ec061f1418ee46c4da93.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ec061f1418ee46c4da93.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.4s 14.5s ⚠️ +1s
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +763 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-35b59ab..f28f.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
677f882d2ed8..bb1c.js gzip N/A 9.73 kB N/A
Overall change 87.1 kB 87.2 kB ⚠️ +33 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-0e6fc45..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
677f882d2ed8..dule.js gzip N/A 6.12 kB N/A
Overall change 82.6 kB 82.6 kB ⚠️ +27 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 882 kB 882 kB ✓
link.js 923 kB 923 kB ⚠️ +303 B
routerDirect.js 917 kB 917 kB ⚠️ +303 B
withRouter.js 917 kB 917 kB ⚠️ +303 B
Overall change 4.53 MB 4.53 MB ⚠️ +909 B
Commit: 31d000e

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 11.5s 11.4s -54ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +763 B
Page Load Tests Overall increase ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.874 1.892 ⚠️ +0.02
/ avg req/sec 1333.78 1321.17 ⚠️ -12.61
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.181 1.152 -0.03
/error-in-render avg req/sec 2116.14 2170.35 +54.21
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB 9.73 kB ⚠️ +33 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-f4b1fe1..074d.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.1 kB 87.2 kB ⚠️ +33 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB 6.12 kB ⚠️ +27 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-6a87989..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ⚠️ +27 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 947 B 947 B ✓
link.html gzip 954 B 954 B ✓
withRouter.html gzip 940 B 940 B ✓
Overall change 2.84 kB 2.84 kB ✓

Diffs

Diff for 677f882d2ed8..71e43f121.js 
@@ -698,6 +698,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -830,6 +831,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -918,7 +920,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1053,7 +1055,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               value: function change(method, url, as, options) {
                 var _this2 = this;
 
-                return new Promise(function(resolve, reject) {
+                return Promise.resolve().then(function() {
                   if (!options._h) {
                     _this2.isSsr = false;
                   } // marking route changes as a navigation start entry
@@ -1067,26 +1069,31 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     var rewriteUrlForNextExport;
                   }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
+                  if (_this2._inFlightRoute) {
+                    _this2.abortComponentLoad(_this2._inFlightRoute);
+                  }
+
+                  var cleanedAs = delBasePath(as);
+                  _this2._inFlightRoute = as; // If the url change is only related to a hash change
                   // We should not proceed. We should only change the state.
                   // WARNING: `_h` is an internal option for handing Next.js client-side
                   // hydration. Your app should _never_ use this property. It may change at
                   // any time without notice.
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
+                  if (!options._h && _this2.onlyAHashChange(cleanedAs)) {
+                    _this2.asPath = cleanedAs;
                     Router.events.emit("hashChangeStart", as);
 
                     _this2.changeState(method, url, as, options);
 
-                    _this2.scrollToHash(as);
+                    _this2.scrollToHash(cleanedAs);
 
                     Router.events.emit("hashChangeComplete", as);
-                    return resolve(true);
+                    return true;
                   }
 
                   var parsed = tryParseRelativeUrl(url);
-                  if (!parsed) return resolve(false);
+                  if (!parsed) return false;
                   var pathname = parsed.pathname,
                     searchParams = parsed.searchParams;
                   var query = (0,
@@ -1098,8 +1105,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
                         delBasePath(pathname)
                       )
-                    : pathname;
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+                    : pathname; // If asked to change the current URL we should reload the current page
                   // (not location.reload() but reload getInitialProps and other Next.js stuffs)
                   // We also need to set the method = replaceState always
                   // as this should not go into the history (That's how browsers work)
@@ -1137,16 +1143,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         if (false) {
                         }
 
-                        return reject(
-                          new Error(
-                            "The provided `as` value ("
-                              .concat(
-                                asPathname,
-                                ") is incompatible with the `href` value ("
-                              )
-                              .concat(route, "). ") +
-                              "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                          )
+                        throw new Error(
+                          "The provided `as` value ("
+                            .concat(
+                              asPathname,
+                              ") is incompatible with the `href` value ("
+                            )
+                            .concat(route, "). ") +
+                            "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
                         );
                       }
                     } else {
@@ -1157,13 +1161,19 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                   Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-                  _this2
+                  return _this2
                     .getRouteInfo(route, pathname, query, as, shallow)
                     .then(function(routeInfo) {
                       var error = routeInfo.error;
 
                       if (error && error.cancelled) {
-                        return resolve(false);
+                        // An event already has been fired
+                        return false;
+                      }
+
+                      if (error && error[ABORTED]) {
+                        Router.events.emit("routeChangeError", error, as);
+                        return false;
                       }
 
                       Router.events.emit("beforeHistoryChange", as);
@@ -1174,11 +1184,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                         var appComp;
                       }
 
-                      _this2
+                      return _this2
                         .set(route, pathname, query, cleanedAs, routeInfo)
                         .then(function() {
                           if (error) {
-                            Router.events.emit("routeChangeError", error, as);
+                            Router.events.emit(
+                              "routeChangeError",
+                              error,
+                              cleanedAs
+                            );
                             throw error;
                           }
 
@@ -1186,9 +1200,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                           }
 
                           Router.events.emit("routeChangeComplete", as);
-                          return resolve(true);
+                          return true;
                         });
-                    }, reject);
+                    });
                 });
               }
             },
@@ -1243,9 +1257,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
Diff for 677f882d2ed8..ce.module.js 
@@ -567,6 +567,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -694,6 +695,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -774,7 +776,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -892,7 +894,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         }
 
         change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
+          return Promise.resolve().then(() => {
             if (!options._h) {
               this.isSsr = false;
             } // marking route changes as a navigation start entry
@@ -906,23 +908,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var rewriteUrlForNextExport;
             }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
+            if (this._inFlightRoute) {
+              this.abortComponentLoad(this._inFlightRoute);
+            }
+
+            var cleanedAs = delBasePath(as);
+            this._inFlightRoute = as; // If the url change is only related to a hash change
             // We should not proceed. We should only change the state.
             // WARNING: `_h` is an internal option for handing Next.js client-side
             // hydration. Your app should _never_ use this property. It may change at
             // any time without notice.
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
+            if (!options._h && this.onlyAHashChange(cleanedAs)) {
+              this.asPath = cleanedAs;
               Router.events.emit("hashChangeStart", as);
               this.changeState(method, url, as, options);
-              this.scrollToHash(as);
+              this.scrollToHash(cleanedAs);
               Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
+              return true;
             }
 
             var parsed = tryParseRelativeUrl(url);
-            if (!parsed) return resolve(false);
+            if (!parsed) return false;
             var { pathname, searchParams } = parsed;
             var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
               searchParams
@@ -934,8 +941,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
                   delBasePath(pathname)
                 )
-              : pathname;
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
+              : pathname; // If asked to change the current URL we should reload the current page
             // (not location.reload() but reload getInitialProps and other Next.js stuffs)
             // We also need to set the method = replaceState always
             // as this should not go into the history (That's how browsers work)
@@ -967,16 +973,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   if (false) {
                   }
 
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                    )
+                  throw new Error(
+                    "The provided `as` value ("
+                      .concat(
+                        asPathname,
+                        ") is incompatible with the `href` value ("
+                      )
+                      .concat(route, "). ") +
+                      "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
                   );
                 }
               } else {
@@ -987,12 +991,18 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
             Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
+            return this.getRouteInfo(route, pathname, query, as, shallow).then(
               routeInfo => {
                 var { error } = routeInfo;
 
                 if (error && error.cancelled) {
-                  return resolve(false);
+                  // An event already has been fired
+                  return false;
+                }
+
+                if (error && error[ABORTED]) {
+                  Router.events.emit("routeChangeError", error, as);
+                  return false;
                 }
 
                 Router.events.emit("beforeHistoryChange", as);
@@ -1002,22 +1012,25 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                   var appComp;
                 }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
-
-                    if (false) {
-                    }
+                return this.set(
+                  route,
+                  pathname,
+                  query,
+                  cleanedAs,
+                  routeInfo
+                ).then(() => {
+                  if (error) {
+                    Router.events.emit("routeChangeError", error, cleanedAs);
+                    throw error;
+                  }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
+                  if (false) {
                   }
-                );
-              },
-              reject
+
+                  Router.events.emit("routeChangeComplete", as);
+                  return true;
+                });
+              }
             );
           });
         }
@@ -1067,9 +1080,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ec061f1418ee46c4da93.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ec061f1418ee46c4da93.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ec061f1418ee46c4da93.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bda7295713a036a13a29.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.7s 12.5s -154ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +763 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-f4b1fe1..074d.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
677f882d2ed8..bb1c.js gzip N/A 9.73 kB N/A
Overall change 87.1 kB 87.2 kB ⚠️ +33 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-6a87989..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
677f882d2ed8..dule.js gzip N/A 6.12 kB N/A
Overall change 82.6 kB 82.6 kB ⚠️ +27 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 882 kB 882 kB ✓
link.js 923 kB 923 kB ⚠️ +303 B
routerDirect.js 917 kB 917 kB ⚠️ +303 B
withRouter.js 917 kB 917 kB ⚠️ +303 B
Overall change 4.53 MB 4.53 MB ⚠️ +909 B
Commit: 327c03c

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Failing test suites

Commit: 31d000e

test/integration/dynamic-routing/test/index.test.js

  • Dynamic Routing > dev mode > should allow calling Router.push on mount successfully
  • Dynamic Routing > production mode > should allow calling Router.push on mount successfully
  • Dynamic Routing > serverless mode > should allow calling Router.push on mount successfully
Expand output

● Dynamic Routing › dev mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › dev mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:769:5
  at integration/dynamic-routing/test/index.test.js:761:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

● Dynamic Routing › production mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › production mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:796:5
  at integration/dynamic-routing/test/index.test.js:772:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

● Dynamic Routing › serverless mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › serverless mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:826:5
  at integration/dynamic-routing/test/index.test.js:799:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Failing test suites

Commit: 769e89a

test/integration/dynamic-routing/test/index.test.js

  • Dynamic Routing > dev mode > should allow calling Router.push on mount successfully
  • Dynamic Routing > production mode > should allow calling Router.push on mount successfully
  • Dynamic Routing > serverless mode > should allow calling Router.push on mount successfully
Expand output

● Dynamic Routing › dev mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › dev mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:769:5
  at integration/dynamic-routing/test/index.test.js:761:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

● Dynamic Routing › production mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › production mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:796:5
  at integration/dynamic-routing/test/index.test.js:772:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

● Dynamic Routing › serverless mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › serverless mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:826:5
  at integration/dynamic-routing/test/index.test.js:799:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

Timer
Timer previously approved these changes Jul 20, 2020
View reviewed changes
Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

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

LGTM, thanks!

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Failing test suites

Commit: 327c03c

test/integration/dynamic-routing/test/index.test.js

  • Dynamic Routing > dev mode > should allow calling Router.push on mount successfully
  • Dynamic Routing > production mode > should allow calling Router.push on mount successfully
  • Dynamic Routing > serverless mode > should allow calling Router.push on mount successfully
Expand output

● Dynamic Routing › dev mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › dev mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:769:5
  at integration/dynamic-routing/test/index.test.js:761:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

● Dynamic Routing › production mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › production mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:796:5
  at integration/dynamic-routing/test/index.test.js:772:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

● Dynamic Routing › serverless mode › should allow calling Router.push on mount successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"h3"}
  (Session info: headless chrome=83.0.4103.116)

  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
> 102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')
      |            ^
  103 |   })
  104 | 
  105 |   it('should navigate optional dynamic page', async () => {

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:102:12)

● Dynamic Routing › serverless mode › should allow calling Router.push on mount successfully

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   97 |   })
   98 | 
>  99 |   it('should allow calling Router.push on mount successfully', async () => {
      |   ^
  100 |     const browser = await webdriver(appPort, '/post-1/on-mount-redir')
  101 |     waitFor(2000)
  102 |     expect(await browser.elementByCss('h3').text()).toBe('My blog')

  at runTests (integration/dynamic-routing/test/index.test.js:99:3)
  at integration/dynamic-routing/test/index.test.js:826:5
  at integration/dynamic-routing/test/index.test.js:799:3
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:760:1)

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020 •
edited
Loading

Failing test suites

Commit: a9cab89

test/integration/size-limit/test/index.test.js

  • Production response size > should not increase the overall response size of default build
Expand output

● Production response size › should not increase the overall response size of default build

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 1024
Received:    1284

  82 |     // These numbers are without gzip compression!
  83 |     const delta = responseSizesBytes - 273 * 1024
> 84 |     expect(delta).toBeLessThanOrEqual(1024) // don't increase size more than 1kb
     |                   ^
  85 |     expect(delta).toBeGreaterThanOrEqual(-1024) // don't decrease size more than 1kb without updating target
  86 |   })
  87 | 

  at Object.<anonymous> (integration/size-limit/test/index.test.js:84:19)

test/integration/getserversideprops/test/index.test.js

  • getServerSideProps > dev mode > should navigate between pages successfully
  • getServerSideProps > production mode > should navigate between pages successfully
  • getServerSideProps > serverless mode > should navigate between pages successfully
Expand output

● getServerSideProps › dev mode › should navigate between pages successfully

expect(received).not.toMatch(expected)

Expected substring: not "time: 1595270030607"
Received string:        "time: 1595270030607"

  193 | 
  194 |     const nextTime = await browser.elementByCss('#anotherTime').text()
> 195 |     expect(snapTime).not.toMatch(nextTime)
      |                          ^
  196 | 
  197 |     // Reset to Home for next test
  198 |     await goFromAnotherToHome()

  at Object.<anonymous> (integration/getserversideprops/test/index.test.js:195:26)
      at runMicrotasks (<anonymous>)

● getServerSideProps › serverless mode › should navigate between pages successfully

expect(received).not.toMatch(expected)

Expected substring: not "time: 1595270057826"
Received string:        "time: 1595270057826"

  193 | 
  194 |     const nextTime = await browser.elementByCss('#anotherTime').text()
> 195 |     expect(snapTime).not.toMatch(nextTime)
      |                          ^
  196 | 
  197 |     // Reset to Home for next test
  198 |     await goFromAnotherToHome()

  at Object.<anonymous> (integration/getserversideprops/test/index.test.js:195:26)
      at runMicrotasks (<anonymous>)

● getServerSideProps › production mode › should navigate between pages successfully

expect(received).not.toMatch(expected)

Expected substring: not "time: 1595270083284"
Received string:        "time: 1595270083284"

  193 | 
  194 |     const nextTime = await browser.elementByCss('#anotherTime').text()
> 195 |     expect(snapTime).not.toMatch(nextTime)
      |                          ^
  196 | 
  197 |     // Reset to Home for next test
  198 |     await goFromAnotherToHome()

  at Object.<anonymous> (integration/getserversideprops/test/index.test.js:195:26)
      at runMicrotasks (<anonymous>)

test/integration/query-with-encoding/test/index.test.js

  • Query String with Encoding > new line > should have correct query on Router#push
  • Query String with Encoding > percent > should have correct query on Router#push
  • Query String with Encoding > plus > should have correct query on Router#push
  • Query String with Encoding > trailing space > should have correct query on Router#push
Expand output

● Query String with Encoding › new line › should have correct query on Router#push

expect(received).toBe(expected) // Object.is equality

Expected: "{\"abc\":\"def\\n\"}"
Received: "{}"

  53 |         await waitFor(1000)
  54 |         const text = await browser.elementByCss('#query-content').text()
> 55 |         expect(text).toBe('{"abc":"def\\n"}')
     |                      ^
  56 |       } finally {
  57 |         await browser.close()
  58 |       }

  at Object.<anonymous> (integration/query-with-encoding/test/index.test.js:55:22)

● Query String with Encoding › trailing space › should have correct query on Router#push

expect(received).toBe(expected) // Object.is equality

Expected: "{\"abc\":\"def \"}"
Received: "{}"

  106 |         await waitFor(1000)
  107 |         const text = await browser.elementByCss('#query-content').text()
> 108 |         expect(text).toBe('{"abc":"def "}')
      |                      ^
  109 |       } finally {
  110 |         await browser.close()
  111 |       }

  at Object.<anonymous> (integration/query-with-encoding/test/index.test.js:108:22)

● Query String with Encoding › percent › should have correct query on Router#push

expect(received).toBe(expected) // Object.is equality

Expected: "{\"abc\":\"def%\"}"
Received: "{}"

  159 |         await waitFor(1000)
  160 |         const text = await browser.elementByCss('#query-content').text()
> 161 |         expect(text).toBe('{"abc":"def%"}')
      |                      ^
  162 |       } finally {
  163 |         await browser.close()
  164 |       }

  at Object.<anonymous> (integration/query-with-encoding/test/index.test.js:161:22)

● Query String with Encoding › plus › should have correct query on Router#push

expect(received).toBe(expected) // Object.is equality

Expected: "{\"abc\":\"def+\"}"
Received: "{}"

  212 |         await waitFor(1000)
  213 |         const text = await browser.elementByCss('#query-content').text()
> 214 |         expect(text).toBe('{"abc":"def+"}')
      |                      ^
  215 |       } finally {
  216 |         await browser.close()
  217 |       }

  at Object.<anonymous> (integration/query-with-encoding/test/index.test.js:214:22)
      at runMicrotasks (<anonymous>)

test/integration/production/test/index.test.js

  • Production Usage > Dynamic import > Import mapping > should load new components and render for prop changes
Expand output

● Production Usage › Dynamic import › Import mapping › should load new components and render for prop changes

thrown: "Exceeded timeout of 300000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  152 |       })
  153 | 
> 154 |       it('should load new components and render for prop changes', async () => {
      |       ^
  155 |         const browser = await webdriver(context.appPort, '/dynamic/bundle')
  156 | 
  157 |         await browser

  at integration/production/test/dynamic.js:154:7
  at integration/production/test/dynamic.js:107:5
  at _default (integration/production/test/dynamic.js:12:3)
  at integration/production/test/index.test.js:786:3

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.2s 12.9s ⚠️ +676ms
nodeModulesSize 66.4 MB 66.4 MB -704 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.061 2.019 -0.04
/ avg req/sec 1212.74 1237.96 +25.22
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.235 1.315 ⚠️ +0.08
/error-in-render avg req/sec 2024.66 1901.67 ⚠️ -122.99
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB 9.87 kB ⚠️ +178 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-97f46c6..f99b.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.1 kB 87.3 kB ⚠️ +178 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB 6.08 kB -13 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-8387589..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB -13 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 947 B 947 B ✓
link.html gzip 953 B 952 B -1 B
withRouter.html gzip 939 B 939 B ✓
Overall change 2.84 kB 2.84 kB -1 B

Diffs

Diff for 677f882d2ed8..71e43f121.js

Diff too large to display

Diff for 677f882d2ed8..ce.module.js 
@@ -694,6 +694,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -774,7 +775,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -891,135 +892,139 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           return this.change("replaceState", url, as, options);
         }
 
-        change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
-            if (!options._h) {
-              this.isSsr = false;
-            } // marking route changes as a navigation start entry
+        async change(method, url, as, options) {
+          if (!options._h) {
+            this.isSsr = false;
+          } // marking route changes as a navigation start entry
 
-            if (_utils.ST) {
-              performance.mark("routeChange");
-            } // Add the ending slash to the paths. So, we can serve the
-            // "<page>/index.html" directly for the SSR page.
+          if (_utils.ST) {
+            performance.mark("routeChange");
+          } // Add the ending slash to the paths. So, we can serve the
+          // "<page>/index.html" directly for the SSR page.
 
-            if (false) {
-              var rewriteUrlForNextExport;
-            }
+          if (false) {
+            var rewriteUrlForNextExport;
+          }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
-            // We should not proceed. We should only change the state.
-            // WARNING: `_h` is an internal option for handing Next.js client-side
-            // hydration. Your app should _never_ use this property. It may change at
-            // any time without notice.
+          if (this._inFlightRoute) {
+            this.abortComponentLoad(this._inFlightRoute);
+          }
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
-              this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
-            }
+          var cleanedAs = delBasePath(as);
+          this._inFlightRoute = as; // If the url change is only related to a hash change
+          // We should not proceed. We should only change the state.
+          // WARNING: `_h` is an internal option for handing Next.js client-side
+          // hydration. Your app should _never_ use this property. It may change at
+          // any time without notice.
+
+          if (!options._h && this.onlyAHashChange(cleanedAs)) {
+            this.asPath = cleanedAs;
+            Router.events.emit("hashChangeStart", as);
+            this.changeState(method, url, as, options);
+            this.scrollToHash(cleanedAs);
+            Router.events.emit("hashChangeComplete", as);
+            return true;
+          }
 
-            var parsed = tryParseRelativeUrl(url);
-            if (!parsed) return resolve(false);
-            var { pathname, searchParams } = parsed;
-            var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
-              searchParams
-            ); // url and as should always be prefixed with basePath by this
-            // point by either next/link or router.push/replace so strip the
-            // basePath from the pathname to match the pages dir 1-to-1
-
-            pathname = pathname
-              ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                  delBasePath(pathname)
-                )
-              : pathname;
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-            // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-            // We also need to set the method = replaceState always
-            // as this should not go into the history (That's how browsers work)
-            // We should compare the new asPath to the current asPath, not the url
-
-            if (!this.urlIsNew(cleanedAs)) {
-              method = "replaceState";
-            }
+          var parsed = tryParseRelativeUrl(url);
+          if (!parsed) return false;
+          var { pathname, searchParams } = parsed;
+          var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
+            searchParams
+          ); // url and as should always be prefixed with basePath by this
+          // point by either next/link or router.push/replace so strip the
+          // basePath from the pathname to match the pages dir 1-to-1
+
+          pathname = pathname
+            ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+                delBasePath(pathname)
+              )
+            : pathname; // If asked to change the current URL we should reload the current page
+          // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+          // We also need to set the method = replaceState always
+          // as this should not go into the history (That's how browsers work)
+          // We should compare the new asPath to the current asPath, not the url
+
+          if (!this.urlIsNew(cleanedAs)) {
+            method = "replaceState";
+          }
 
-            var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-              pathname
+          var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+            pathname
+          );
+          var { shallow = false } = options;
+
+          if ((0, _isDynamic.isDynamicRoute)(route)) {
+            var { pathname: asPathname } = (0,
+            _parseRelativeUrl.parseRelativeUrl)(cleanedAs);
+            var routeRegex = (0, _routeRegex.getRouteRegex)(route);
+            var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
+              asPathname
             );
-            var { shallow = false } = options;
-
-            if ((0, _isDynamic.isDynamicRoute)(route)) {
-              var { pathname: asPathname } = (0,
-              _parseRelativeUrl.parseRelativeUrl)(cleanedAs);
-              var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-              var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
-                asPathname
-              );
 
-              if (!routeMatch) {
-                var missingParams = Object.keys(routeRegex.groups).filter(
-                  param => !query[param]
-                );
+            if (!routeMatch) {
+              var missingParams = Object.keys(routeRegex.groups).filter(
+                param => !query[param]
+              );
 
-                if (missingParams.length > 0) {
-                  if (false) {
-                  }
+              if (missingParams.length > 0) {
+                if (false) {
+                }
 
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                throw new Error(
+                  "The provided `as` value ("
+                    .concat(
+                      asPathname,
+                      ") is incompatible with the `href` value ("
                     )
-                  );
-                }
-              } else {
-                // Merge params into `query`, overwriting any specified in search
-                Object.assign(query, routeMatch);
+                    .concat(route, "). ") +
+                    "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                );
               }
+            } else {
+              // Merge params into `query`, overwriting any specified in search
+              Object.assign(query, routeMatch);
             }
+          }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+          Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
-              routeInfo => {
-                var { error } = routeInfo;
+          return this.getRouteInfo(route, pathname, query, as, shallow).then(
+            routeInfo => {
+              var { error } = routeInfo;
 
-                if (error && error.cancelled) {
-                  return resolve(false);
-                }
+              if (error && error.cancelled) {
+                // An event has already been fired
+                return false;
+              }
 
-                Router.events.emit("beforeHistoryChange", as);
-                this.changeState(method, url, as, options);
+              Router.events.emit("beforeHistoryChange", as);
+              this.changeState(method, url, as, options);
 
-                if (false) {
-                  var appComp;
-                }
+              if (false) {
+                var appComp;
+              }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
+              return this.set(
+                route,
+                pathname,
+                query,
+                cleanedAs,
+                routeInfo
+              ).then(() => {
+                if (error) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
+                  throw error;
+                }
 
-                    if (false) {
-                    }
+                if (false) {
+                }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
-                  }
-                );
-              },
-              reject
-            );
-          });
+                Router.events.emit("routeChangeComplete", as);
+                return true;
+              });
+            }
+          );
         }
 
         changeState(method, url, as) {
@@ -1046,7 +1051,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           }
         }
 
-        getRouteInfo(route, pathname, query, as) {
+        async getRouteInfo(route, pathname, query, as) {
           var shallow =
             arguments.length > 4 && arguments[4] !== undefined
               ? arguments[4]
@@ -1058,83 +1063,75 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             return Promise.resolve(cachedRouteInfo);
           }
 
-          var handleError = (err, loadErrorFail) => {
-            return new Promise(resolve => {
-              if (err.code === "PAGE_LOAD_ERROR" || loadErrorFail) {
-                // If we can't load the page it could be one of following reasons
-                //  1. Page doesn't exists
-                //  2. Page does exist in a different zone
-                //  3. Internal error while loading the page
-                // So, doing a hard reload is the proper way to deal with this.
-                window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
-
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
-
-                return resolve({
-                  error: err
-                });
-              }
+          var handleError = async (err, loadErrorFail) => {
+            if (err.code === "PAGE_LOAD_ERROR" || loadErrorFail) {
+              Router.events.emit("routeChangeError", err, as); // If we can't load the page it could be one of following reasons
+              //  1. Page doesn't exists
+              //  2. Page does exist in a different zone
+              //  3. Internal error while loading the page
+              // So, doing a hard reload is the proper way to deal with this.
 
-              if (err.cancelled) {
-                // @ts-ignore TODO: fix the control flow here
-                return resolve({
-                  error: err
-                });
-              }
+              window.location.href = as; // Changing the URL doesn't block executing the current code path.
+              // So, we need to mark it as cancelled to stop the routing logic.
 
-              resolve(
-                this.fetchComponent("/_error")
-                  .then(res => {
-                    var { page: Component } = res;
-                    var routeInfo = {
-                      Component,
-                      err
-                    };
-                    return new Promise(resolveRouteInfo => {
-                      this.getInitialProps(Component, {
-                        err,
-                        pathname,
-                        query
-                      }).then(
-                        props => {
-                          routeInfo.props = props;
-                          routeInfo.error = err;
-                          resolveRouteInfo(routeInfo);
-                        },
-                        gipErr => {
-                          console.error(
-                            "Error in error page `getInitialProps`: ",
-                            gipErr
-                          );
-                          routeInfo.error = err;
-                          routeInfo.props = {};
-                          resolveRouteInfo(routeInfo);
-                        }
-                      );
-                    });
-                  })
-                  .catch(routeInfoErr => handleError(routeInfoErr, true))
-              );
-            });
-          };
+              var cancellationError = Object.assign(new Error(err.message), {
+                cancelled: true
+              }); // @ts-ignore TODO: fix the control flow here
 
-          return new Promise((resolve, reject) => {
-            if (cachedRouteInfo) {
-              return resolve(cachedRouteInfo);
+              return {
+                error: cancellationError
+              };
             }
 
-            this.fetchComponent(route).then(
-              res =>
-                resolve({
-                  Component: res.page,
-                  __N_SSG: res.mod.__N_SSG,
-                  __N_SSP: res.mod.__N_SSP
-                }),
-              reject
-            );
-          })
-            .then(routeInfo => {
+            if (err.cancelled) {
+              // @ts-ignore TODO: fix the control flow here
+              return {
+                error: err
+              };
+            }
+
+            return this.fetchComponent("/_error")
+              .then(res => {
+                var { page: Component } = res;
+                var routeInfo = {
+                  Component,
+                  err
+                };
+                return this.getInitialProps(Component, {
+                  err,
+                  pathname,
+                  query
+                }).then(
+                  props => {
+                    routeInfo.props = props;
+                    routeInfo.error = err;
+                    return routeInfo;
+                  },
+                  gipErr => {
+                    console.error(
+                      "Error in error page `getInitialProps`: ",
+                      gipErr
+                    );
+                    routeInfo.props = {};
+                    routeInfo.error = err;
+                    return routeInfo;
+                  }
+                );
+              })
+              .catch(routeInfoErr => handleError(routeInfoErr, true));
+          };
+
+          if (cachedRouteInfo) {
+            return cachedRouteInfo;
+          }
+
+          return this.fetchComponent(route)
+            .then(res => {
+              var routeInfo = {
+                Component: res.page,
+                __N_SSG: res.mod.__N_SSG,
+                __N_SSP: res.mod.__N_SSP
+              };
               var { Component, __N_SSG, __N_SSP } = routeInfo;
 
               if (false) {
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0dc7449155c37ec75402.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9c8b14587d6d9e3a474a.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0dc7449155c37ec75402.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0dc7449155c37ec75402.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9c8b14587d6d9e3a474a.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0dc7449155c37ec75402.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0dc7449155c37ec75402.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.9c8b14587d6d9e3a474a.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0dc7449155c37ec75402.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 13.4s 13.7s ⚠️ +315ms
nodeModulesSize 66.4 MB 66.4 MB -704 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-97f46c6..f99b.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
677f882d2ed8..9b0a.js gzip N/A 9.87 kB N/A
Overall change 87.1 kB 87.3 kB ⚠️ +178 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-8387589..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
677f882d2ed8..dule.js gzip N/A 6.08 kB N/A
Overall change 82.6 kB 82.6 kB -13 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 881 kB 881 kB ✓
link.js 922 kB 922 kB -256 B
routerDirect.js 916 kB 916 kB -256 B
withRouter.js 917 kB 916 kB -256 B
Overall change 4.53 MB 4.53 MB -768 B
Commit: a9cab89

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 14s 15.1s ⚠️ +1.2s
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +370 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.219 2.44 ⚠️ +0.22
/ avg req/sec 1126.67 1024.76 ⚠️ -101.91
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.541 1.53 -0.01
/error-in-render avg req/sec 1622.14 1633.78 +11.64
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB 9.85 kB ⚠️ +150 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-97f46c6..f99b.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.1 kB 87.3 kB ⚠️ +150 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB 6.12 kB ⚠️ +20 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-8387589..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ⚠️ +20 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 947 B 945 B -2 B
link.html gzip 953 B 952 B -1 B
withRouter.html gzip 939 B 938 B -1 B
Overall change 2.84 kB 2.83 kB -4 B

Diffs

Diff for 677f882d2ed8..71e43f121.js 
@@ -656,12 +656,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
     /***/ elyg: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
+      var _slicedToArray = __webpack_require__("J4zp");
+
       var _regeneratorRuntime = __webpack_require__("o0o1");
 
       var _asyncToGenerator = __webpack_require__("yXPU");
 
-      var _slicedToArray = __webpack_require__("J4zp");
-
       var _classCallCheck = __webpack_require__("lwsE");
 
       var _createClass = __webpack_require__("W8MJ");
@@ -698,6 +698,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -830,6 +831,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -918,7 +920,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1050,147 +1052,257 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "change",
-              value: function change(method, url, as, options) {
-                var _this2 = this;
+              value: (function() {
+                var _change = _asyncToGenerator(
+                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee(
+                    method,
+                    url,
+                    as,
+                    options
+                  ) {
+                    var _this2 = this;
+
+                    var rewriteUrlForNextExport,
+                      cleanedAs,
+                      parsed,
+                      pathname,
+                      searchParams,
+                      query,
+                      route,
+                      _options$shallow,
+                      shallow,
+                      _ref3,
+                      asPathname,
+                      routeRegex,
+                      routeMatch,
+                      missingParams;
 
-                return new Promise(function(resolve, reject) {
-                  if (!options._h) {
-                    _this2.isSsr = false;
-                  } // marking route changes as a navigation start entry
+                    return _regeneratorRuntime.wrap(
+                      function _callee$(_context) {
+                        while (1) {
+                          switch ((_context.prev = _context.next)) {
+                            case 0:
+                              if (!options._h) {
+                                this.isSsr = false;
+                              } // marking route changes as a navigation start entry
 
-                  if (_utils.ST) {
-                    performance.mark("routeChange");
-                  } // Add the ending slash to the paths. So, we can serve the
-                  // "<page>/index.html" directly for the SSR page.
+                              if (_utils.ST) {
+                                performance.mark("routeChange");
+                              } // Add the ending slash to the paths. So, we can serve the
+                              // "<page>/index.html" directly for the SSR page.
 
-                  if (false) {
-                    var rewriteUrlForNextExport;
-                  }
+                              if (false) {
+                              }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
-                  // We should not proceed. We should only change the state.
-                  // WARNING: `_h` is an internal option for handing Next.js client-side
-                  // hydration. Your app should _never_ use this property. It may change at
-                  // any time without notice.
+                              if (this._inFlightRoute) {
+                                this.abortComponentLoad(this._inFlightRoute);
+                              }
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                              cleanedAs = delBasePath(as);
+                              this._inFlightRoute = as; // If the url change is only related to a hash change
+                              // We should not proceed. We should only change the state.
+                              // WARNING: `_h` is an internal option for handing Next.js client-side
+                              // hydration. Your app should _never_ use this property. It may change at
+                              // any time without notice.
 
-                    _this2.changeState(method, url, as, options);
+                              if (
+                                !(
+                                  !options._h && this.onlyAHashChange(cleanedAs)
+                                )
+                              ) {
+                                _context.next = 13;
+                                break;
+                              }
 
-                    _this2.scrollToHash(as);
+                              this.asPath = cleanedAs;
+                              Router.events.emit("hashChangeStart", as);
+                              this.changeState(method, url, as, options);
+                              this.scrollToHash(cleanedAs);
+                              Router.events.emit("hashChangeComplete", as);
+                              return _context.abrupt("return", true);
 
-                    Router.events.emit("hashChangeComplete", as);
-                    return resolve(true);
-                  }
+                            case 13:
+                              parsed = tryParseRelativeUrl(url);
 
-                  var parsed = tryParseRelativeUrl(url);
-                  if (!parsed) return resolve(false);
-                  var pathname = parsed.pathname,
-                    searchParams = parsed.searchParams;
-                  var query = (0,
-                  _searchParamsToUrlQuery.searchParamsToUrlQuery)(searchParams); // url and as should always be prefixed with basePath by this
-                  // point by either next/link or router.push/replace so strip the
-                  // basePath from the pathname to match the pages dir 1-to-1
-
-                  pathname = pathname
-                    ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                        delBasePath(pathname)
-                      )
-                    : pathname;
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-                  // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-                  // We also need to set the method = replaceState always
-                  // as this should not go into the history (That's how browsers work)
-                  // We should compare the new asPath to the current asPath, not the url
-
-                  if (!_this2.urlIsNew(cleanedAs)) {
-                    method = "replaceState";
-                  }
+                              if (parsed) {
+                                _context.next = 16;
+                                break;
+                              }
 
-                  var route = (0,
-                  _normalizeTrailingSlash.removePathTrailingSlash)(pathname);
-                  var _options$shallow = options.shallow,
-                    shallow =
-                      _options$shallow === void 0 ? false : _options$shallow;
-
-                  if ((0, _isDynamic.isDynamicRoute)(route)) {
-                    var _ref3 = (0, _parseRelativeUrl.parseRelativeUrl)(
-                        cleanedAs
-                      ),
-                      asPathname = _ref3.pathname;
-
-                    var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-                    var routeMatch = (0, _routeMatcher.getRouteMatcher)(
-                      routeRegex
-                    )(asPathname);
-
-                    if (!routeMatch) {
-                      var missingParams = Object.keys(routeRegex.groups).filter(
-                        function(param) {
-                          return !query[param];
-                        }
-                      );
+                              return _context.abrupt("return", false);
+
+                            case 16:
+                              (pathname = parsed.pathname),
+                                (searchParams = parsed.searchParams);
+                              query = (0,
+                              _searchParamsToUrlQuery.searchParamsToUrlQuery)(
+                                searchParams
+                              ); // url and as should always be prefixed with basePath by this
+                              // point by either next/link or router.push/replace so strip the
+                              // basePath from the pathname to match the pages dir 1-to-1
+
+                              pathname = pathname
+                                ? (0,
+                                  _normalizeTrailingSlash.removePathTrailingSlash)(
+                                    delBasePath(pathname)
+                                  )
+                                : pathname; // If asked to change the current URL we should reload the current page
+                              // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+                              // We also need to set the method = replaceState always
+                              // as this should not go into the history (That's how browsers work)
+                              // We should compare the new asPath to the current asPath, not the url
+
+                              if (!this.urlIsNew(cleanedAs)) {
+                                method = "replaceState";
+                              }
 
-                      if (missingParams.length > 0) {
-                        if (false) {
-                        }
+                              route = (0,
+                              _normalizeTrailingSlash.removePathTrailingSlash)(
+                                pathname
+                              );
+                              (_options$shallow = options.shallow),
+                                (shallow =
+                                  _options$shallow === void 0
+                                    ? false
+                                    : _options$shallow);
+
+                              if (!(0, _isDynamic.isDynamicRoute)(route)) {
+                                _context.next = 34;
+                                break;
+                              }
 
-                        return reject(
-                          new Error(
-                            "The provided `as` value ("
-                              .concat(
-                                asPathname,
-                                ") is incompatible with the `href` value ("
-                              )
-                              .concat(route, "). ") +
-                              "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                          )
-                        );
-                      }
-                    } else {
-                      // Merge params into `query`, overwriting any specified in search
-                      Object.assign(query, routeMatch);
-                    }
-                  }
+                              (_ref3 = (0, _parseRelativeUrl.parseRelativeUrl)(
+                                cleanedAs
+                              )),
+                                (asPathname = _ref3.pathname);
+                              routeRegex = (0, _routeRegex.getRouteRegex)(
+                                route
+                              );
+                              routeMatch = (0, _routeMatcher.getRouteMatcher)(
+                                routeRegex
+                              )(asPathname);
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                              if (routeMatch) {
+                                _context.next = 33;
+                                break;
+                              }
 
-                  _this2
-                    .getRouteInfo(route, pathname, query, as, shallow)
-                    .then(function(routeInfo) {
-                      var error = routeInfo.error;
+                              missingParams = Object.keys(
+                                routeRegex.groups
+                              ).filter(function(param) {
+                                return !query[param];
+                              });
 
-                      if (error && error.cancelled) {
-                        return resolve(false);
-                      }
+                              if (!(missingParams.length > 0)) {
+                                _context.next = 31;
+                                break;
+                              }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                              if (false) {
+                              }
 
-                      _this2.changeState(method, url, as, options);
+                              throw new Error(
+                                "The provided `as` value ("
+                                  .concat(
+                                    asPathname,
+                                    ") is incompatible with the `href` value ("
+                                  )
+                                  .concat(route, "). ") +
+                                  "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                              );
 
-                      if (false) {
-                        var appComp;
-                      }
+                            case 31:
+                              _context.next = 34;
+                              break;
 
-                      _this2
-                        .set(route, pathname, query, cleanedAs, routeInfo)
-                        .then(function() {
-                          if (error) {
-                            Router.events.emit("routeChangeError", error, as);
-                            throw error;
-                          }
+                            case 33:
+                              // Merge params into `query`, overwriting any specified in search
+                              Object.assign(query, routeMatch);
+
+                            case 34:
+                              Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+
+                              return _context.abrupt(
+                                "return",
+                                this.getRouteInfo(
+                                  route,
+                                  pathname,
+                                  query,
+                                  as,
+                                  shallow
+                                ).then(function(routeInfo) {
+                                  var error = routeInfo.error;
+
+                                  if (error && error.cancelled) {
+                                    // An event already has been fired
+                                    return false;
+                                  }
+
+                                  if (error && error[ABORTED]) {
+                                    Router.events.emit(
+                                      "routeChangeError",
+                                      error,
+                                      as
+                                    );
+                                    return false;
+                                  }
+
+                                  Router.events.emit("beforeHistoryChange", as);
+
+                                  _this2.changeState(method, url, as, options);
+
+                                  if (false) {
+                                    var appComp;
+                                  }
+
+                                  return _this2
+                                    .set(
+                                      route,
+                                      pathname,
+                                      query,
+                                      cleanedAs,
+                                      routeInfo
+                                    )
+                                    .then(function() {
+                                      if (error) {
+                                        Router.events.emit(
+                                          "routeChangeError",
+                                          error,
+                                          cleanedAs
+                                        );
+                                        throw error;
+                                      }
+
+                                      if (false) {
+                                      }
+
+                                      Router.events.emit(
+                                        "routeChangeComplete",
+                                        as
+                                      );
+                                      return true;
+                                    });
+                                })
+                              );
 
-                          if (false) {
+                            case 36:
+                            case "end":
+                              return _context.stop();
                           }
+                        }
+                      },
+                      _callee,
+                      this
+                    );
+                  })
+                );
 
-                          Router.events.emit("routeChangeComplete", as);
-                          return resolve(true);
-                        });
-                    }, reject);
-                });
-              }
+                function change(_x, _x2, _x3, _x4) {
+                  return _change.apply(this, arguments);
+                }
+
+                return change;
+              })()
             },
             {
               key: "changeState",
@@ -1243,9 +1355,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1490,14 +1602,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               key: "fetchComponent",
               value: (function() {
                 var _fetchComponent = _asyncToGenerator(
-                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee(
+                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee2(
                     route
                   ) {
                     var cancelled, cancel, componentResult, error;
                     return _regeneratorRuntime.wrap(
-                      function _callee$(_context) {
+                      function _callee2$(_context2) {
                         while (1) {
-                          switch ((_context.prev = _context.next)) {
+                          switch ((_context2.prev = _context2.next)) {
                             case 0:
                               cancelled = false;
 
@@ -1505,14 +1617,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 cancelled = true;
                               };
 
-                              _context.next = 4;
+                              _context2.next = 4;
                               return this.pageLoader.loadPage(route);
 
                             case 4:
-                              componentResult = _context.sent;
+                              componentResult = _context2.sent;
 
                               if (!cancelled) {
-                                _context.next = 9;
+                                _context2.next = 9;
                                 break;
                               }
 
@@ -1530,21 +1642,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 this.clc = null;
                               }
 
-                              return _context.abrupt("return", componentResult);
+                              return _context2.abrupt(
+                                "return",
+                                componentResult
+                              );
 
                             case 11:
                             case "end":
-                              return _context.stop();
+                              return _context2.stop();
                           }
                         }
                       },
-                      _callee,
+                      _callee2,
                       this
                     );
                   })
                 );
 
-                function fetchComponent(_x) {
+                function fetchComponent(_x5) {
                   return _fetchComponent.apply(this, arguments);
                 }
Diff for 677f882d2ed8..ce.module.js 
@@ -567,6 +567,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -694,6 +695,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -774,7 +776,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -891,135 +893,144 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           return this.change("replaceState", url, as, options);
         }
 
-        change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
-            if (!options._h) {
-              this.isSsr = false;
-            } // marking route changes as a navigation start entry
+        async change(method, url, as, options) {
+          if (!options._h) {
+            this.isSsr = false;
+          } // marking route changes as a navigation start entry
 
-            if (_utils.ST) {
-              performance.mark("routeChange");
-            } // Add the ending slash to the paths. So, we can serve the
-            // "<page>/index.html" directly for the SSR page.
+          if (_utils.ST) {
+            performance.mark("routeChange");
+          } // Add the ending slash to the paths. So, we can serve the
+          // "<page>/index.html" directly for the SSR page.
 
-            if (false) {
-              var rewriteUrlForNextExport;
-            }
+          if (false) {
+            var rewriteUrlForNextExport;
+          }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
-            // We should not proceed. We should only change the state.
-            // WARNING: `_h` is an internal option for handing Next.js client-side
-            // hydration. Your app should _never_ use this property. It may change at
-            // any time without notice.
+          if (this._inFlightRoute) {
+            this.abortComponentLoad(this._inFlightRoute);
+          }
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
-              this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
-            }
+          var cleanedAs = delBasePath(as);
+          this._inFlightRoute = as; // If the url change is only related to a hash change
+          // We should not proceed. We should only change the state.
+          // WARNING: `_h` is an internal option for handing Next.js client-side
+          // hydration. Your app should _never_ use this property. It may change at
+          // any time without notice.
+
+          if (!options._h && this.onlyAHashChange(cleanedAs)) {
+            this.asPath = cleanedAs;
+            Router.events.emit("hashChangeStart", as);
+            this.changeState(method, url, as, options);
+            this.scrollToHash(cleanedAs);
+            Router.events.emit("hashChangeComplete", as);
+            return true;
+          }
 
-            var parsed = tryParseRelativeUrl(url);
-            if (!parsed) return resolve(false);
-            var { pathname, searchParams } = parsed;
-            var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
-              searchParams
-            ); // url and as should always be prefixed with basePath by this
-            // point by either next/link or router.push/replace so strip the
-            // basePath from the pathname to match the pages dir 1-to-1
-
-            pathname = pathname
-              ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                  delBasePath(pathname)
-                )
-              : pathname;
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-            // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-            // We also need to set the method = replaceState always
-            // as this should not go into the history (That's how browsers work)
-            // We should compare the new asPath to the current asPath, not the url
-
-            if (!this.urlIsNew(cleanedAs)) {
-              method = "replaceState";
-            }
+          var parsed = tryParseRelativeUrl(url);
+          if (!parsed) return false;
+          var { pathname, searchParams } = parsed;
+          var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
+            searchParams
+          ); // url and as should always be prefixed with basePath by this
+          // point by either next/link or router.push/replace so strip the
+          // basePath from the pathname to match the pages dir 1-to-1
+
+          pathname = pathname
+            ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+                delBasePath(pathname)
+              )
+            : pathname; // If asked to change the current URL we should reload the current page
+          // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+          // We also need to set the method = replaceState always
+          // as this should not go into the history (That's how browsers work)
+          // We should compare the new asPath to the current asPath, not the url
+
+          if (!this.urlIsNew(cleanedAs)) {
+            method = "replaceState";
+          }
 
-            var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-              pathname
+          var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+            pathname
+          );
+          var { shallow = false } = options;
+
+          if ((0, _isDynamic.isDynamicRoute)(route)) {
+            var { pathname: asPathname } = (0,
+            _parseRelativeUrl.parseRelativeUrl)(cleanedAs);
+            var routeRegex = (0, _routeRegex.getRouteRegex)(route);
+            var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
+              asPathname
             );
-            var { shallow = false } = options;
-
-            if ((0, _isDynamic.isDynamicRoute)(route)) {
-              var { pathname: asPathname } = (0,
-              _parseRelativeUrl.parseRelativeUrl)(cleanedAs);
-              var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-              var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
-                asPathname
+
+            if (!routeMatch) {
+              var missingParams = Object.keys(routeRegex.groups).filter(
+                param => !query[param]
               );
 
-              if (!routeMatch) {
-                var missingParams = Object.keys(routeRegex.groups).filter(
-                  param => !query[param]
-                );
+              if (missingParams.length > 0) {
+                if (false) {
+                }
 
-                if (missingParams.length > 0) {
-                  if (false) {
-                  }
-
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                throw new Error(
+                  "The provided `as` value ("
+                    .concat(
+                      asPathname,
+                      ") is incompatible with the `href` value ("
                     )
-                  );
-                }
-              } else {
-                // Merge params into `query`, overwriting any specified in search
-                Object.assign(query, routeMatch);
+                    .concat(route, "). ") +
+                    "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                );
               }
+            } else {
+              // Merge params into `query`, overwriting any specified in search
+              Object.assign(query, routeMatch);
             }
+          }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+          Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
-              routeInfo => {
-                var { error } = routeInfo;
+          return this.getRouteInfo(route, pathname, query, as, shallow).then(
+            routeInfo => {
+              var { error } = routeInfo;
 
-                if (error && error.cancelled) {
-                  return resolve(false);
-                }
+              if (error && error.cancelled) {
+                // An event already has been fired
+                return false;
+              }
 
-                Router.events.emit("beforeHistoryChange", as);
-                this.changeState(method, url, as, options);
+              if (error && error[ABORTED]) {
+                Router.events.emit("routeChangeError", error, as);
+                return false;
+              }
 
-                if (false) {
-                  var appComp;
-                }
+              Router.events.emit("beforeHistoryChange", as);
+              this.changeState(method, url, as, options);
+
+              if (false) {
+                var appComp;
+              }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
+              return this.set(
+                route,
+                pathname,
+                query,
+                cleanedAs,
+                routeInfo
+              ).then(() => {
+                if (error) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
+                  throw error;
+                }
 
-                    if (false) {
-                    }
+                if (false) {
+                }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
-                  }
-                );
-              },
-              reject
-            );
-          });
+                Router.events.emit("routeChangeComplete", as);
+                return true;
+              });
+            }
+          );
         }
 
         changeState(method, url, as) {
@@ -1067,9 +1078,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.70d4af434a83c9750a43.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.70d4af434a83c9750a43.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.70d4af434a83c9750a43.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 14.6s 14.5s -145ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +370 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-97f46c6..f99b.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
677f882d2ed8..7a20.js gzip N/A 9.85 kB N/A
Overall change 87.1 kB 87.3 kB ⚠️ +150 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-8387589..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
677f882d2ed8..dule.js gzip N/A 6.12 kB N/A
Overall change 82.6 kB 82.6 kB ⚠️ +20 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 881 kB 881 kB ✓
link.js 922 kB 923 kB ⚠️ +81 B
routerDirect.js 916 kB 917 kB ⚠️ +81 B
withRouter.js 917 kB 917 kB ⚠️ +81 B
Overall change 4.53 MB 4.53 MB ⚠️ +243 B
Commit: 6fa75df

@ijjk
Copy link
Member

ijjk commented Jul 20, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 12.9s 13.3s ⚠️ +338ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +370 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.159 2.19 ⚠️ +0.03
/ avg req/sec 1157.89 1141.71 ⚠️ -16.18
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.443 1.51 ⚠️ +0.07
/error-in-render avg req/sec 1731.97 1655.15 ⚠️ -76.82
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB 9.85 kB ⚠️ +150 B
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-97f46c6..f99b.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.1 kB 87.3 kB ⚠️ +150 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB 6.12 kB ⚠️ +20 B
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-8387589..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ⚠️ +20 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Janpot/next.js basepath-router-events Change
index.html gzip 947 B 945 B -2 B
link.html gzip 953 B 952 B -1 B
withRouter.html gzip 939 B 938 B -1 B
Overall change 2.84 kB 2.83 kB -4 B

Diffs

Diff for 677f882d2ed8..71e43f121.js 
@@ -656,12 +656,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
     /***/ elyg: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
+      var _slicedToArray = __webpack_require__("J4zp");
+
       var _regeneratorRuntime = __webpack_require__("o0o1");
 
       var _asyncToGenerator = __webpack_require__("yXPU");
 
-      var _slicedToArray = __webpack_require__("J4zp");
-
       var _classCallCheck = __webpack_require__("lwsE");
 
       var _createClass = __webpack_require__("W8MJ");
@@ -698,6 +698,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -830,6 +831,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = function(e) {
             if (!e.state) {
@@ -918,7 +920,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -1050,147 +1052,257 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             },
             {
               key: "change",
-              value: function change(method, url, as, options) {
-                var _this2 = this;
+              value: (function() {
+                var _change = _asyncToGenerator(
+                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee(
+                    method,
+                    url,
+                    as,
+                    options
+                  ) {
+                    var _this2 = this;
+
+                    var rewriteUrlForNextExport,
+                      cleanedAs,
+                      parsed,
+                      pathname,
+                      searchParams,
+                      query,
+                      route,
+                      _options$shallow,
+                      shallow,
+                      _ref3,
+                      asPathname,
+                      routeRegex,
+                      routeMatch,
+                      missingParams;
 
-                return new Promise(function(resolve, reject) {
-                  if (!options._h) {
-                    _this2.isSsr = false;
-                  } // marking route changes as a navigation start entry
+                    return _regeneratorRuntime.wrap(
+                      function _callee$(_context) {
+                        while (1) {
+                          switch ((_context.prev = _context.next)) {
+                            case 0:
+                              if (!options._h) {
+                                this.isSsr = false;
+                              } // marking route changes as a navigation start entry
 
-                  if (_utils.ST) {
-                    performance.mark("routeChange");
-                  } // Add the ending slash to the paths. So, we can serve the
-                  // "<page>/index.html" directly for the SSR page.
+                              if (_utils.ST) {
+                                performance.mark("routeChange");
+                              } // Add the ending slash to the paths. So, we can serve the
+                              // "<page>/index.html" directly for the SSR page.
 
-                  if (false) {
-                    var rewriteUrlForNextExport;
-                  }
+                              if (false) {
+                              }
 
-                  _this2.abortComponentLoad(as); // If the url change is only related to a hash change
-                  // We should not proceed. We should only change the state.
-                  // WARNING: `_h` is an internal option for handing Next.js client-side
-                  // hydration. Your app should _never_ use this property. It may change at
-                  // any time without notice.
+                              if (this._inFlightRoute) {
+                                this.abortComponentLoad(this._inFlightRoute);
+                              }
 
-                  if (!options._h && _this2.onlyAHashChange(as)) {
-                    _this2.asPath = as;
-                    Router.events.emit("hashChangeStart", as);
+                              cleanedAs = delBasePath(as);
+                              this._inFlightRoute = as; // If the url change is only related to a hash change
+                              // We should not proceed. We should only change the state.
+                              // WARNING: `_h` is an internal option for handing Next.js client-side
+                              // hydration. Your app should _never_ use this property. It may change at
+                              // any time without notice.
 
-                    _this2.changeState(method, url, as, options);
+                              if (
+                                !(
+                                  !options._h && this.onlyAHashChange(cleanedAs)
+                                )
+                              ) {
+                                _context.next = 13;
+                                break;
+                              }
 
-                    _this2.scrollToHash(as);
+                              this.asPath = cleanedAs;
+                              Router.events.emit("hashChangeStart", as);
+                              this.changeState(method, url, as, options);
+                              this.scrollToHash(cleanedAs);
+                              Router.events.emit("hashChangeComplete", as);
+                              return _context.abrupt("return", true);
 
-                    Router.events.emit("hashChangeComplete", as);
-                    return resolve(true);
-                  }
+                            case 13:
+                              parsed = tryParseRelativeUrl(url);
 
-                  var parsed = tryParseRelativeUrl(url);
-                  if (!parsed) return resolve(false);
-                  var pathname = parsed.pathname,
-                    searchParams = parsed.searchParams;
-                  var query = (0,
-                  _searchParamsToUrlQuery.searchParamsToUrlQuery)(searchParams); // url and as should always be prefixed with basePath by this
-                  // point by either next/link or router.push/replace so strip the
-                  // basePath from the pathname to match the pages dir 1-to-1
-
-                  pathname = pathname
-                    ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                        delBasePath(pathname)
-                      )
-                    : pathname;
-                  var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-                  // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-                  // We also need to set the method = replaceState always
-                  // as this should not go into the history (That's how browsers work)
-                  // We should compare the new asPath to the current asPath, not the url
-
-                  if (!_this2.urlIsNew(cleanedAs)) {
-                    method = "replaceState";
-                  }
+                              if (parsed) {
+                                _context.next = 16;
+                                break;
+                              }
 
-                  var route = (0,
-                  _normalizeTrailingSlash.removePathTrailingSlash)(pathname);
-                  var _options$shallow = options.shallow,
-                    shallow =
-                      _options$shallow === void 0 ? false : _options$shallow;
-
-                  if ((0, _isDynamic.isDynamicRoute)(route)) {
-                    var _ref3 = (0, _parseRelativeUrl.parseRelativeUrl)(
-                        cleanedAs
-                      ),
-                      asPathname = _ref3.pathname;
-
-                    var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-                    var routeMatch = (0, _routeMatcher.getRouteMatcher)(
-                      routeRegex
-                    )(asPathname);
-
-                    if (!routeMatch) {
-                      var missingParams = Object.keys(routeRegex.groups).filter(
-                        function(param) {
-                          return !query[param];
-                        }
-                      );
+                              return _context.abrupt("return", false);
+
+                            case 16:
+                              (pathname = parsed.pathname),
+                                (searchParams = parsed.searchParams);
+                              query = (0,
+                              _searchParamsToUrlQuery.searchParamsToUrlQuery)(
+                                searchParams
+                              ); // url and as should always be prefixed with basePath by this
+                              // point by either next/link or router.push/replace so strip the
+                              // basePath from the pathname to match the pages dir 1-to-1
+
+                              pathname = pathname
+                                ? (0,
+                                  _normalizeTrailingSlash.removePathTrailingSlash)(
+                                    delBasePath(pathname)
+                                  )
+                                : pathname; // If asked to change the current URL we should reload the current page
+                              // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+                              // We also need to set the method = replaceState always
+                              // as this should not go into the history (That's how browsers work)
+                              // We should compare the new asPath to the current asPath, not the url
+
+                              if (!this.urlIsNew(cleanedAs)) {
+                                method = "replaceState";
+                              }
 
-                      if (missingParams.length > 0) {
-                        if (false) {
-                        }
+                              route = (0,
+                              _normalizeTrailingSlash.removePathTrailingSlash)(
+                                pathname
+                              );
+                              (_options$shallow = options.shallow),
+                                (shallow =
+                                  _options$shallow === void 0
+                                    ? false
+                                    : _options$shallow);
+
+                              if (!(0, _isDynamic.isDynamicRoute)(route)) {
+                                _context.next = 34;
+                                break;
+                              }
 
-                        return reject(
-                          new Error(
-                            "The provided `as` value ("
-                              .concat(
-                                asPathname,
-                                ") is incompatible with the `href` value ("
-                              )
-                              .concat(route, "). ") +
-                              "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
-                          )
-                        );
-                      }
-                    } else {
-                      // Merge params into `query`, overwriting any specified in search
-                      Object.assign(query, routeMatch);
-                    }
-                  }
+                              (_ref3 = (0, _parseRelativeUrl.parseRelativeUrl)(
+                                cleanedAs
+                              )),
+                                (asPathname = _ref3.pathname);
+                              routeRegex = (0, _routeRegex.getRouteRegex)(
+                                route
+                              );
+                              routeMatch = (0, _routeMatcher.getRouteMatcher)(
+                                routeRegex
+                              )(asPathname);
 
-                  Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+                              if (routeMatch) {
+                                _context.next = 33;
+                                break;
+                              }
 
-                  _this2
-                    .getRouteInfo(route, pathname, query, as, shallow)
-                    .then(function(routeInfo) {
-                      var error = routeInfo.error;
+                              missingParams = Object.keys(
+                                routeRegex.groups
+                              ).filter(function(param) {
+                                return !query[param];
+                              });
 
-                      if (error && error.cancelled) {
-                        return resolve(false);
-                      }
+                              if (!(missingParams.length > 0)) {
+                                _context.next = 31;
+                                break;
+                              }
 
-                      Router.events.emit("beforeHistoryChange", as);
+                              if (false) {
+                              }
 
-                      _this2.changeState(method, url, as, options);
+                              throw new Error(
+                                "The provided `as` value ("
+                                  .concat(
+                                    asPathname,
+                                    ") is incompatible with the `href` value ("
+                                  )
+                                  .concat(route, "). ") +
+                                  "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                              );
 
-                      if (false) {
-                        var appComp;
-                      }
+                            case 31:
+                              _context.next = 34;
+                              break;
 
-                      _this2
-                        .set(route, pathname, query, cleanedAs, routeInfo)
-                        .then(function() {
-                          if (error) {
-                            Router.events.emit("routeChangeError", error, as);
-                            throw error;
-                          }
+                            case 33:
+                              // Merge params into `query`, overwriting any specified in search
+                              Object.assign(query, routeMatch);
+
+                            case 34:
+                              Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+
+                              return _context.abrupt(
+                                "return",
+                                this.getRouteInfo(
+                                  route,
+                                  pathname,
+                                  query,
+                                  as,
+                                  shallow
+                                ).then(function(routeInfo) {
+                                  var error = routeInfo.error;
+
+                                  if (error && error.cancelled) {
+                                    // An event already has been fired
+                                    return false;
+                                  }
+
+                                  if (error && error[ABORTED]) {
+                                    Router.events.emit(
+                                      "routeChangeError",
+                                      error,
+                                      as
+                                    );
+                                    return false;
+                                  }
+
+                                  Router.events.emit("beforeHistoryChange", as);
+
+                                  _this2.changeState(method, url, as, options);
+
+                                  if (false) {
+                                    var appComp;
+                                  }
+
+                                  return _this2
+                                    .set(
+                                      route,
+                                      pathname,
+                                      query,
+                                      cleanedAs,
+                                      routeInfo
+                                    )
+                                    .then(function() {
+                                      if (error) {
+                                        Router.events.emit(
+                                          "routeChangeError",
+                                          error,
+                                          cleanedAs
+                                        );
+                                        throw error;
+                                      }
+
+                                      if (false) {
+                                      }
+
+                                      Router.events.emit(
+                                        "routeChangeComplete",
+                                        as
+                                      );
+                                      return true;
+                                    });
+                                })
+                              );
 
-                          if (false) {
+                            case 36:
+                            case "end":
+                              return _context.stop();
                           }
+                        }
+                      },
+                      _callee,
+                      this
+                    );
+                  })
+                );
 
-                          Router.events.emit("routeChangeComplete", as);
-                          return resolve(true);
-                        });
-                    }, reject);
-                });
-              }
+                function change(_x, _x2, _x3, _x4) {
+                  return _change.apply(this, arguments);
+                }
+
+                return change;
+              })()
             },
             {
               key: "changeState",
@@ -1243,9 +1355,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                       //  3. Internal error while loading the page
                       // So, doing a hard reload is the proper way to deal with this.
                       window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                      // So, we need to mark it as a cancelled error and stop the routing logic.
+                      // So, we need to mark it as aborted and stop the routing logic.
 
-                      err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                      err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                       return resolve({
                         error: err
@@ -1490,14 +1602,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               key: "fetchComponent",
               value: (function() {
                 var _fetchComponent = _asyncToGenerator(
-                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee(
+                  /*#__PURE__*/ _regeneratorRuntime.mark(function _callee2(
                     route
                   ) {
                     var cancelled, cancel, componentResult, error;
                     return _regeneratorRuntime.wrap(
-                      function _callee$(_context) {
+                      function _callee2$(_context2) {
                         while (1) {
-                          switch ((_context.prev = _context.next)) {
+                          switch ((_context2.prev = _context2.next)) {
                             case 0:
                               cancelled = false;
 
@@ -1505,14 +1617,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 cancelled = true;
                               };
 
-                              _context.next = 4;
+                              _context2.next = 4;
                               return this.pageLoader.loadPage(route);
 
                             case 4:
-                              componentResult = _context.sent;
+                              componentResult = _context2.sent;
 
                               if (!cancelled) {
-                                _context.next = 9;
+                                _context2.next = 9;
                                 break;
                               }
 
@@ -1530,21 +1642,24 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 this.clc = null;
                               }
 
-                              return _context.abrupt("return", componentResult);
+                              return _context2.abrupt(
+                                "return",
+                                componentResult
+                              );
 
                             case 11:
                             case "end":
-                              return _context.stop();
+                              return _context2.stop();
                           }
                         }
                       },
-                      _callee,
+                      _callee2,
                       this
                     );
                   })
                 );
 
-                function fetchComponent(_x) {
+                function fetchComponent(_x5) {
                   return _fetchComponent.apply(this, arguments);
                 }
Diff for 677f882d2ed8..ce.module.js 
@@ -567,6 +567,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
       /* global __NEXT_DATA__ */
       // tslint:disable:no-console
 
+      var ABORTED = Symbol("aborted");
       var basePath = false || "";
 
       function addBasePath(path) {
@@ -694,6 +695,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this._wrapApp = void 0;
           this.isSsr = void 0;
           this.isFallback = void 0;
+          this._inFlightRoute = void 0;
 
           this.onPopState = e => {
             if (!e.state) {
@@ -774,7 +776,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
             __NEXT_DATA__.autoExport
               ? _pathname
-              : delBasePath(_as);
+              : _as;
           this.basePath = basePath;
           this.sub = subscription;
           this.clc = null;
@@ -891,135 +893,144 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           return this.change("replaceState", url, as, options);
         }
 
-        change(method, url, as, options) {
-          return new Promise((resolve, reject) => {
-            if (!options._h) {
-              this.isSsr = false;
-            } // marking route changes as a navigation start entry
+        async change(method, url, as, options) {
+          if (!options._h) {
+            this.isSsr = false;
+          } // marking route changes as a navigation start entry
 
-            if (_utils.ST) {
-              performance.mark("routeChange");
-            } // Add the ending slash to the paths. So, we can serve the
-            // "<page>/index.html" directly for the SSR page.
+          if (_utils.ST) {
+            performance.mark("routeChange");
+          } // Add the ending slash to the paths. So, we can serve the
+          // "<page>/index.html" directly for the SSR page.
 
-            if (false) {
-              var rewriteUrlForNextExport;
-            }
+          if (false) {
+            var rewriteUrlForNextExport;
+          }
 
-            this.abortComponentLoad(as); // If the url change is only related to a hash change
-            // We should not proceed. We should only change the state.
-            // WARNING: `_h` is an internal option for handing Next.js client-side
-            // hydration. Your app should _never_ use this property. It may change at
-            // any time without notice.
+          if (this._inFlightRoute) {
+            this.abortComponentLoad(this._inFlightRoute);
+          }
 
-            if (!options._h && this.onlyAHashChange(as)) {
-              this.asPath = as;
-              Router.events.emit("hashChangeStart", as);
-              this.changeState(method, url, as, options);
-              this.scrollToHash(as);
-              Router.events.emit("hashChangeComplete", as);
-              return resolve(true);
-            }
+          var cleanedAs = delBasePath(as);
+          this._inFlightRoute = as; // If the url change is only related to a hash change
+          // We should not proceed. We should only change the state.
+          // WARNING: `_h` is an internal option for handing Next.js client-side
+          // hydration. Your app should _never_ use this property. It may change at
+          // any time without notice.
+
+          if (!options._h && this.onlyAHashChange(cleanedAs)) {
+            this.asPath = cleanedAs;
+            Router.events.emit("hashChangeStart", as);
+            this.changeState(method, url, as, options);
+            this.scrollToHash(cleanedAs);
+            Router.events.emit("hashChangeComplete", as);
+            return true;
+          }
 
-            var parsed = tryParseRelativeUrl(url);
-            if (!parsed) return resolve(false);
-            var { pathname, searchParams } = parsed;
-            var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
-              searchParams
-            ); // url and as should always be prefixed with basePath by this
-            // point by either next/link or router.push/replace so strip the
-            // basePath from the pathname to match the pages dir 1-to-1
-
-            pathname = pathname
-              ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-                  delBasePath(pathname)
-                )
-              : pathname;
-            var cleanedAs = delBasePath(as); // If asked to change the current URL we should reload the current page
-            // (not location.reload() but reload getInitialProps and other Next.js stuffs)
-            // We also need to set the method = replaceState always
-            // as this should not go into the history (That's how browsers work)
-            // We should compare the new asPath to the current asPath, not the url
-
-            if (!this.urlIsNew(cleanedAs)) {
-              method = "replaceState";
-            }
+          var parsed = tryParseRelativeUrl(url);
+          if (!parsed) return false;
+          var { pathname, searchParams } = parsed;
+          var query = (0, _searchParamsToUrlQuery.searchParamsToUrlQuery)(
+            searchParams
+          ); // url and as should always be prefixed with basePath by this
+          // point by either next/link or router.push/replace so strip the
+          // basePath from the pathname to match the pages dir 1-to-1
+
+          pathname = pathname
+            ? (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+                delBasePath(pathname)
+              )
+            : pathname; // If asked to change the current URL we should reload the current page
+          // (not location.reload() but reload getInitialProps and other Next.js stuffs)
+          // We also need to set the method = replaceState always
+          // as this should not go into the history (That's how browsers work)
+          // We should compare the new asPath to the current asPath, not the url
+
+          if (!this.urlIsNew(cleanedAs)) {
+            method = "replaceState";
+          }
 
-            var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
-              pathname
+          var route = (0, _normalizeTrailingSlash.removePathTrailingSlash)(
+            pathname
+          );
+          var { shallow = false } = options;
+
+          if ((0, _isDynamic.isDynamicRoute)(route)) {
+            var { pathname: asPathname } = (0,
+            _parseRelativeUrl.parseRelativeUrl)(cleanedAs);
+            var routeRegex = (0, _routeRegex.getRouteRegex)(route);
+            var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
+              asPathname
             );
-            var { shallow = false } = options;
-
-            if ((0, _isDynamic.isDynamicRoute)(route)) {
-              var { pathname: asPathname } = (0,
-              _parseRelativeUrl.parseRelativeUrl)(cleanedAs);
-              var routeRegex = (0, _routeRegex.getRouteRegex)(route);
-              var routeMatch = (0, _routeMatcher.getRouteMatcher)(routeRegex)(
-                asPathname
+
+            if (!routeMatch) {
+              var missingParams = Object.keys(routeRegex.groups).filter(
+                param => !query[param]
               );
 
-              if (!routeMatch) {
-                var missingParams = Object.keys(routeRegex.groups).filter(
-                  param => !query[param]
-                );
+              if (missingParams.length > 0) {
+                if (false) {
+                }
 
-                if (missingParams.length > 0) {
-                  if (false) {
-                  }
-
-                  return reject(
-                    new Error(
-                      "The provided `as` value ("
-                        .concat(
-                          asPathname,
-                          ") is incompatible with the `href` value ("
-                        )
-                        .concat(route, "). ") +
-                        "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                throw new Error(
+                  "The provided `as` value ("
+                    .concat(
+                      asPathname,
+                      ") is incompatible with the `href` value ("
                     )
-                  );
-                }
-              } else {
-                // Merge params into `query`, overwriting any specified in search
-                Object.assign(query, routeMatch);
+                    .concat(route, "). ") +
+                    "Read more: https://err.sh/vercel/next.js/incompatible-href-as"
+                );
               }
+            } else {
+              // Merge params into `query`, overwriting any specified in search
+              Object.assign(query, routeMatch);
             }
+          }
 
-            Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
+          Router.events.emit("routeChangeStart", as); // If shallow is true and the route exists in the router cache we reuse the previous result
 
-            this.getRouteInfo(route, pathname, query, as, shallow).then(
-              routeInfo => {
-                var { error } = routeInfo;
+          return this.getRouteInfo(route, pathname, query, as, shallow).then(
+            routeInfo => {
+              var { error } = routeInfo;
 
-                if (error && error.cancelled) {
-                  return resolve(false);
-                }
+              if (error && error.cancelled) {
+                // An event already has been fired
+                return false;
+              }
 
-                Router.events.emit("beforeHistoryChange", as);
-                this.changeState(method, url, as, options);
+              if (error && error[ABORTED]) {
+                Router.events.emit("routeChangeError", error, as);
+                return false;
+              }
 
-                if (false) {
-                  var appComp;
-                }
+              Router.events.emit("beforeHistoryChange", as);
+              this.changeState(method, url, as, options);
+
+              if (false) {
+                var appComp;
+              }
 
-                this.set(route, pathname, query, cleanedAs, routeInfo).then(
-                  () => {
-                    if (error) {
-                      Router.events.emit("routeChangeError", error, as);
-                      throw error;
-                    }
+              return this.set(
+                route,
+                pathname,
+                query,
+                cleanedAs,
+                routeInfo
+              ).then(() => {
+                if (error) {
+                  Router.events.emit("routeChangeError", error, cleanedAs);
+                  throw error;
+                }
 
-                    if (false) {
-                    }
+                if (false) {
+                }
 
-                    Router.events.emit("routeChangeComplete", as);
-                    return resolve(true);
-                  }
-                );
-              },
-              reject
-            );
-          });
+                Router.events.emit("routeChangeComplete", as);
+                return true;
+              });
+            }
+          );
         }
 
         changeState(method, url, as) {
@@ -1067,9 +1078,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                 //  3. Internal error while loading the page
                 // So, doing a hard reload is the proper way to deal with this.
                 window.location.href = as; // Changing the URL doesn't block executing the current code path.
-                // So, we need to mark it as a cancelled error and stop the routing logic.
+                // So, we need to mark it as aborted and stop the routing logic.
 
-                err.cancelled = true; // @ts-ignore TODO: fix the control flow here
+                err[ABORTED] = true; // @ts-ignore TODO: fix the control flow here
 
                 return resolve({
                   error: err
Diff for index.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.70d4af434a83c9750a43.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.70d4af434a83c9750a43.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.947aa20a42771e43f121.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.70d4af434a83c9750a43.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.c62c8836981ca09168ce.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.1689eb4961f5d64e2d8b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
buildDuration 14.3s 14.5s ⚠️ +239ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +370 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..db49.js gzip 9.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-97f46c6..f99b.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
677f882d2ed8..7a20.js gzip N/A 9.85 kB N/A
Overall change 87.1 kB 87.3 kB ⚠️ +150 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
677f882d2ed8..dule.js gzip 6.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-8387589..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
677f882d2ed8..dule.js gzip N/A 6.12 kB N/A
Overall change 82.6 kB 82.6 kB ⚠️ +20 B
Client Pages
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary Janpot/next.js basepath-router-events Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary Janpot/next.js basepath-router-events Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary Janpot/next.js basepath-router-events Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 881 kB 881 kB ✓
link.js 922 kB 923 kB ⚠️ +81 B
routerDirect.js 916 kB 917 kB ⚠️ +81 B
withRouter.js 917 kB 917 kB ⚠️ +81 B
Overall change 4.53 MB 4.53 MB ⚠️ +243 B
Commit: 60a32a9

@Timer Timer merged commit 7dd61b4 into vercel:canary Jul 20, 2020
@Janpot Janpot mentioned this pull request Jul 21, 2020
Merged
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Timer approved these changes

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

@chibicode chibicode Awaiting requested review from chibicode

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Potentially uncaught error in Next.js router basePath: urls in Router events include basePath
3 participants
@Janpot @ijjk @Timer