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

fix: prevent scrolling to hash if triggered by browser navigation button

Open tim-crisp opened this issue 5 years ago • 6 comments

Fixes #13653

This fixes incorrect scrolling behaviour when soft navigating between pages with an anchor using next router. Please see the example project provided by @monae. You can test the expected scrolling behaviour by running his project locally and disabling JavaScript.

Would appreciate any advice on how to test this?

tim-crisp avatar Aug 31 '20 16:08 tim-crisp

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
buildDuration 13.4s 13.8s ⚠️ +420ms
nodeModulesSize 57.4 MB 57.4 MB ⚠️ +1.45 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
/ failed reqs 0 0
/ total time (seconds) 2.585 2.545 -0.04
/ avg req/sec 967.19 982.33 +15.14
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.476 1.525 ⚠️ +0.05
/error-in-render avg req/sec 1693.78 1638.88 ⚠️ -54.9
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..f20b.js gzip 10.3 kB 10.3 kB ⚠️ +25 B
framework.HASH.js gzip 39 kB 39 kB
main-49b1fd5..c64c.js gzip 7.35 kB 7.39 kB ⚠️ +47 B
webpack-e067..f178.js gzip 751 B 751 B
Overall change 57.3 kB 57.4 kB ⚠️ +72 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..dule.js gzip 6.13 kB 6.16 kB ⚠️ +30 B
framework.HA..dule.js gzip 39 kB 39 kB
main-99715b4..dule.js gzip 6.4 kB 6.44 kB ⚠️ +35 B
webpack-07c5..dule.js gzip 751 B 751 B
Overall change 52.2 kB 52.3 kB ⚠️ +65 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB
_error-28298..e0c9.js gzip 3.44 kB 3.44 kB
hooks-89731c..c609.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-000f151..65d4.js gzip 1.29 kB 1.29 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 7.69 kB 7.69 kB
Client Pages Modern
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-75d3a82..dule.js gzip 625 B 625 B
_error-65c8a..dule.js gzip 2.29 kB 2.29 kB
hooks-cbf13f..dule.js gzip 387 B 387 B
index-b9a643..dule.js gzip 226 B 226 B
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-f..dule.js gzip 282 B 282 B
Overall change 5.35 kB 5.35 kB
Client Build Manifests
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_buildManifest.js gzip 322 B 322 B
_buildManife..dule.js gzip 330 B 330 B
Overall change 652 B 652 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
index.html gzip 971 B 971 B
link.html gzip 977 B 979 B ⚠️ +2 B
withRouter.html gzip 964 B 964 B
Overall change 2.91 kB 2.91 kB ⚠️ +2 B

Diffs

Diff for 677f882d2ed8..60.module.js
@@ -791,7 +791,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               url,
               as,
               Object.assign({}, options, {
-                shallow: options.shallow && this._shallow
+                shallow: options.shallow && this._shallow,
+                wasBrowserNavigation: true
               })
             );
           }; // represents the current component key
@@ -1041,6 +1042,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               as,
               shallow
             );
+            routeInfo.wasBrowserNavigation = !!options.wasBrowserNavigation;
             var { error } = routeInfo;
             Router.events.emit("beforeHistoryChange", as);
             this.changeState(method, url, as, options);
Diff for 677f882d2ed8..886051899.js
@@ -944,7 +944,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               url,
               as,
               Object.assign({}, options, {
-                shallow: options.shallow && _this._shallow
+                shallow: options.shallow && _this._shallow,
+                wasBrowserNavigation: true
               })
             );
           }; // represents the current component key
@@ -1297,6 +1298,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                           case 51:
                             routeInfo = _context.sent;
+                            routeInfo.wasBrowserNavigation = !!options.wasBrowserNavigation;
                             error = routeInfo.error;
                             Router.events.emit("beforeHistoryChange", as);
                             this.changeState(method, url, as, options);
@@ -1304,7 +1306,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (false) {
                             }
 
-                            _context.next = 58;
+                            _context.next = 59;
                             return this.set(
                               route,
                               pathname,
@@ -1316,9 +1318,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               else throw e;
                             });
 
-                          case 58:
+                          case 59:
                             if (!error) {
-                              _context.next = 61;
+                              _context.next = 62;
                               break;
                             }
 
@@ -1329,28 +1331,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             throw error;
 
-                          case 61:
+                          case 62:
                             if (false) {
                             }
 
                             Router.events.emit("routeChangeComplete", as);
                             return _context.abrupt("return", true);
 
-                          case 66:
-                            _context.prev = 66;
+                          case 67:
+                            _context.prev = 67;
                             _context.t0 = _context["catch"](48);
 
                             if (!_context.t0.cancelled) {
-                              _context.next = 70;
+                              _context.next = 71;
                               break;
                             }
 
                             return _context.abrupt("return", false);
 
-                          case 70:
+                          case 71:
                             throw _context.t0;
 
-                          case 71:
+                          case 72:
                           case "end":
                             return _context.stop();
                         }
@@ -1358,7 +1360,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     },
                     _callee,
                     this,
-                    [[48, 66]]
+                    [[48, 67]]
                   );
                 })
               );
Diff for main-b79b1e5..d98106011.js
@@ -424,7 +424,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           {
             key: "componentDidUpdate",
             value: function componentDidUpdate() {
-              this.scrollToHash();
+              // Do not scroll to hash when an update is triggered as a result
+              // of the user navigating via the browser back/forward buttons
+              if (!this.props.wasBrowserNavigation) {
+                this.scrollToHash();
+              }
             }
           },
           {
@@ -610,13 +614,15 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             var Component = _ref5.Component,
                               styleSheets = _ref5.styleSheets,
                               props = _ref5.props,
-                              err = _ref5.err;
+                              err = _ref5.err,
+                              wasBrowserNavigation = _ref5.wasBrowserNavigation;
                             return render({
                               App: App,
                               Component: Component,
                               styleSheets: styleSheets,
                               props: props,
-                              err: err
+                              err: err,
+                              wasBrowserNavigation: wasBrowserNavigation
                             });
                           }
                         }
@@ -889,7 +895,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       }
 
       function AppContainer(_ref7) {
-        var children = _ref7.children;
+        var children = _ref7.children,
+          wasBrowserNavigation = _ref7.wasBrowserNavigation;
         return /*#__PURE__*/ _react["default"].createElement(
           Container,
           {
@@ -900,7 +907,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               })["catch"](function(err) {
                 return console.error("Error rendering page: ", err);
               });
-            }
+            },
+            wasBrowserNavigation: wasBrowserNavigation
           },
           /*#__PURE__*/ _react["default"].createElement(
             _routerContext.RouterContext.Provider,
@@ -942,7 +950,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           Component = _ref8.Component,
           props = _ref8.props,
           err = _ref8.err,
-          styleSheets = _ref8.styleSheets;
+          styleSheets = _ref8.styleSheets,
+          wasBrowserNavigation = _ref8.wasBrowserNavigation;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
         var appProps = (0, _extends2["default"])(
@@ -1086,7 +1095,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           },
           /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
-            null,
+            {
+              wasBrowserNavigation: wasBrowserNavigation
+            },
             /*#__PURE__*/ _react["default"].createElement(App, appProps)
           )
         );
Diff for main-e4ec5a0..88.module.js
@@ -318,7 +318,11 @@
         }
 
         componentDidUpdate() {
-          this.scrollToHash();
+          // Do not scroll to hash when an update is triggered as a result
+          // of the user navigating via the browser back/forward buttons
+          if (!this.props.wasBrowserNavigation) {
+            this.scrollToHash();
+          }
         }
 
         scrollToHash() {
@@ -429,13 +433,20 @@
             err: initialErr,
             isFallback: Boolean(isFallback),
             subscription: (_ref3, App) => {
-              var { Component, styleSheets, props, err } = _ref3;
+              var {
+                Component,
+                styleSheets,
+                props,
+                err,
+                wasBrowserNavigation
+              } = _ref3;
               return render({
                 App,
                 Component,
                 styleSheets,
                 props,
-                err
+                err,
+                wasBrowserNavigation
               });
             }
           }
@@ -635,7 +646,7 @@
       }
 
       function AppContainer(_ref5) {
-        var { children } = _ref5;
+        var { children, wasBrowserNavigation } = _ref5;
         return /*#__PURE__*/ _react.default.createElement(
           Container,
           {
@@ -643,7 +654,8 @@
               renderError({
                 App: CachedApp,
                 err: error
-              }).catch(err => console.error("Error rendering page: ", err))
+              }).catch(err => console.error("Error rendering page: ", err)),
+            wasBrowserNavigation: wasBrowserNavigation
           },
           /*#__PURE__*/ _react.default.createElement(
             _routerContext.RouterContext.Provider,
@@ -679,7 +691,14 @@
       };
 
       function doRender(_ref6) {
-        var { App, Component, props, err, styleSheets } = _ref6;
+        var {
+          App,
+          Component,
+          props,
+          err,
+          styleSheets,
+          wasBrowserNavigation
+        } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
         var appProps = (0, _extends2.default)(
@@ -816,7 +835,9 @@
           },
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
-            null,
+            {
+              wasBrowserNavigation: wasBrowserNavigation
+            },
             /*#__PURE__*/ _react.default.createElement(App, appProps)
           )
         );
Diff for index.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -118,13 +118,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -87,13 +87,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -123,13 +123,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -118,13 +118,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
buildDuration 15.3s 15.1s -218ms
nodeModulesSize 57.4 MB 57.4 MB ⚠️ +1.45 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..f20b.js gzip 10.3 kB N/A N/A
framework.HASH.js gzip 39 kB 39 kB
main-49b1fd5..c64c.js gzip 7.35 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B
677f882d2ed8..b756.js gzip N/A 10.3 kB N/A
main-36a435d..b966.js gzip N/A 7.39 kB N/A
Overall change 57.3 kB 57.4 kB ⚠️ +72 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..dule.js gzip 6.13 kB N/A N/A
framework.HA..dule.js gzip 39 kB 39 kB
main-99715b4..dule.js gzip 6.4 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B
677f882d2ed8..dule.js gzip N/A 6.16 kB N/A
main-aa468fa..dule.js gzip N/A 6.44 kB N/A
Overall change 52.2 kB 52.3 kB ⚠️ +65 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB
_error-28298..e0c9.js gzip 3.44 kB 3.44 kB
hooks-89731c..c609.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-000f151..65d4.js gzip 1.29 kB 1.29 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 7.69 kB 7.69 kB
Client Pages Modern
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-75d3a82..dule.js gzip 625 B 625 B
_error-65c8a..dule.js gzip 2.29 kB 2.29 kB
hooks-cbf13f..dule.js gzip 387 B 387 B
index-b9a643..dule.js gzip 226 B 226 B
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-f..dule.js gzip 282 B 282 B
Overall change 5.35 kB 5.35 kB
Client Build Manifests
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_buildManifest.js gzip 322 B 322 B
_buildManife..dule.js gzip 330 B 330 B
Overall change 652 B 652 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_error.js 1.03 MB 1.03 MB
404.html 4.22 kB 4.22 kB
hooks.html 3.86 kB 3.86 kB
index.js 1.03 MB 1.03 MB
link.js 1.07 MB 1.07 MB ⚠️ +107 B
routerDirect.js 1.07 MB 1.07 MB ⚠️ +107 B
withRouter.js 1.07 MB 1.07 MB ⚠️ +107 B
Overall change 5.28 MB 5.28 MB ⚠️ +321 B
Commit: f7f00a8e12aba0c4b742f6867c9726a3093a574c

ijjk avatar Aug 31 '20 16:08 ijjk

Failing test suites

Commit: f7f00a8e12aba0c4b742f6867c9726a3093a574c

test/integration/build-output/test/index.test.js

  • Build Output > Basic Application Output > should not deviate from snapshot
Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.10000000000000142

  105 |       expect(err404FirstLoad.endsWith('kB')).toBe(true)
  106 | 
> 107 |       expect(parseFloat(sharedByAll) - 59.9).toBeLessThanOrEqual(0)
      |                                              ^
  108 |       expect(sharedByAll.endsWith('kB')).toBe(true)
  109 | 
  110 |       if (_appSize.endsWith('kB')) {

  at Object.<anonymous> (integration/build-output/test/index.test.js:107:46)

ijjk avatar Aug 31 '20 16:08 ijjk

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
buildDuration 10.7s 10.9s ⚠️ +270ms
nodeModulesSize 57.4 MB 57.4 MB ⚠️ +1.45 kB
Page Load Tests Overall increase ✓
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
/ failed reqs 0 0
/ total time (seconds) 2.038 1.997 -0.04
/ avg req/sec 1226.62 1251.98 +25.36
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.321 1.184 -0.14
/error-in-render avg req/sec 1892.57 2110.92 +218.35
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..f20b.js gzip 10.3 kB 10.3 kB ⚠️ +25 B
framework.HASH.js gzip 39 kB 39 kB
main-49b1fd5..c64c.js gzip 7.35 kB 7.39 kB ⚠️ +47 B
webpack-e067..f178.js gzip 751 B 751 B
Overall change 57.3 kB 57.4 kB ⚠️ +72 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..dule.js gzip 6.13 kB 6.16 kB ⚠️ +30 B
framework.HA..dule.js gzip 39 kB 39 kB
main-99715b4..dule.js gzip 6.4 kB 6.44 kB ⚠️ +35 B
webpack-07c5..dule.js gzip 751 B 751 B
Overall change 52.2 kB 52.3 kB ⚠️ +65 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB
_error-28298..e0c9.js gzip 3.44 kB 3.44 kB
hooks-89731c..c609.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-000f151..65d4.js gzip 1.29 kB 1.29 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 7.69 kB 7.69 kB
Client Pages Modern
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-75d3a82..dule.js gzip 625 B 625 B
_error-65c8a..dule.js gzip 2.29 kB 2.29 kB
hooks-cbf13f..dule.js gzip 387 B 387 B
index-b9a643..dule.js gzip 226 B 226 B
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-f..dule.js gzip 282 B 282 B
Overall change 5.35 kB 5.35 kB
Client Build Manifests
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_buildManifest.js gzip 322 B 322 B
_buildManife..dule.js gzip 330 B 330 B
Overall change 652 B 652 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
index.html gzip 971 B 971 B
link.html gzip 977 B 979 B ⚠️ +2 B
withRouter.html gzip 964 B 964 B
Overall change 2.91 kB 2.91 kB ⚠️ +2 B

Diffs

Diff for 677f882d2ed8..60.module.js
@@ -791,7 +791,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               url,
               as,
               Object.assign({}, options, {
-                shallow: options.shallow && this._shallow
+                shallow: options.shallow && this._shallow,
+                wasBrowserNavigation: true
               })
             );
           }; // represents the current component key
@@ -1041,6 +1042,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               as,
               shallow
             );
+            routeInfo.wasBrowserNavigation = !!options.wasBrowserNavigation;
             var { error } = routeInfo;
             Router.events.emit("beforeHistoryChange", as);
             this.changeState(method, url, as, options);
Diff for 677f882d2ed8..886051899.js
@@ -944,7 +944,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               url,
               as,
               Object.assign({}, options, {
-                shallow: options.shallow && _this._shallow
+                shallow: options.shallow && _this._shallow,
+                wasBrowserNavigation: true
               })
             );
           }; // represents the current component key
@@ -1297,6 +1298,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                           case 51:
                             routeInfo = _context.sent;
+                            routeInfo.wasBrowserNavigation = !!options.wasBrowserNavigation;
                             error = routeInfo.error;
                             Router.events.emit("beforeHistoryChange", as);
                             this.changeState(method, url, as, options);
@@ -1304,7 +1306,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (false) {
                             }
 
-                            _context.next = 58;
+                            _context.next = 59;
                             return this.set(
                               route,
                               pathname,
@@ -1316,9 +1318,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               else throw e;
                             });
 
-                          case 58:
+                          case 59:
                             if (!error) {
-                              _context.next = 61;
+                              _context.next = 62;
                               break;
                             }
 
@@ -1329,28 +1331,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             throw error;
 
-                          case 61:
+                          case 62:
                             if (false) {
                             }
 
                             Router.events.emit("routeChangeComplete", as);
                             return _context.abrupt("return", true);
 
-                          case 66:
-                            _context.prev = 66;
+                          case 67:
+                            _context.prev = 67;
                             _context.t0 = _context["catch"](48);
 
                             if (!_context.t0.cancelled) {
-                              _context.next = 70;
+                              _context.next = 71;
                               break;
                             }
 
                             return _context.abrupt("return", false);
 
-                          case 70:
+                          case 71:
                             throw _context.t0;
 
-                          case 71:
+                          case 72:
                           case "end":
                             return _context.stop();
                         }
@@ -1358,7 +1360,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     },
                     _callee,
                     this,
-                    [[48, 66]]
+                    [[48, 67]]
                   );
                 })
               );
Diff for main-b79b1e5..d98106011.js
@@ -424,7 +424,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           {
             key: "componentDidUpdate",
             value: function componentDidUpdate() {
-              this.scrollToHash();
+              // Do not scroll to hash when an update is triggered as a result
+              // of the user navigating via the browser back/forward buttons
+              if (!this.props.wasBrowserNavigation) {
+                this.scrollToHash();
+              }
             }
           },
           {
@@ -610,13 +614,15 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             var Component = _ref5.Component,
                               styleSheets = _ref5.styleSheets,
                               props = _ref5.props,
-                              err = _ref5.err;
+                              err = _ref5.err,
+                              wasBrowserNavigation = _ref5.wasBrowserNavigation;
                             return render({
                               App: App,
                               Component: Component,
                               styleSheets: styleSheets,
                               props: props,
-                              err: err
+                              err: err,
+                              wasBrowserNavigation: wasBrowserNavigation
                             });
                           }
                         }
@@ -889,7 +895,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       }
 
       function AppContainer(_ref7) {
-        var children = _ref7.children;
+        var children = _ref7.children,
+          wasBrowserNavigation = _ref7.wasBrowserNavigation;
         return /*#__PURE__*/ _react["default"].createElement(
           Container,
           {
@@ -900,7 +907,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               })["catch"](function(err) {
                 return console.error("Error rendering page: ", err);
               });
-            }
+            },
+            wasBrowserNavigation: wasBrowserNavigation
           },
           /*#__PURE__*/ _react["default"].createElement(
             _routerContext.RouterContext.Provider,
@@ -942,7 +950,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           Component = _ref8.Component,
           props = _ref8.props,
           err = _ref8.err,
-          styleSheets = _ref8.styleSheets;
+          styleSheets = _ref8.styleSheets,
+          wasBrowserNavigation = _ref8.wasBrowserNavigation;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
         var appProps = (0, _extends2["default"])(
@@ -1086,7 +1095,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           },
           /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
-            null,
+            {
+              wasBrowserNavigation: wasBrowserNavigation
+            },
             /*#__PURE__*/ _react["default"].createElement(App, appProps)
           )
         );
Diff for main-e4ec5a0..88.module.js
@@ -318,7 +318,11 @@
         }
 
         componentDidUpdate() {
-          this.scrollToHash();
+          // Do not scroll to hash when an update is triggered as a result
+          // of the user navigating via the browser back/forward buttons
+          if (!this.props.wasBrowserNavigation) {
+            this.scrollToHash();
+          }
         }
 
         scrollToHash() {
@@ -429,13 +433,20 @@
             err: initialErr,
             isFallback: Boolean(isFallback),
             subscription: (_ref3, App) => {
-              var { Component, styleSheets, props, err } = _ref3;
+              var {
+                Component,
+                styleSheets,
+                props,
+                err,
+                wasBrowserNavigation
+              } = _ref3;
               return render({
                 App,
                 Component,
                 styleSheets,
                 props,
-                err
+                err,
+                wasBrowserNavigation
               });
             }
           }
@@ -635,7 +646,7 @@
       }
 
       function AppContainer(_ref5) {
-        var { children } = _ref5;
+        var { children, wasBrowserNavigation } = _ref5;
         return /*#__PURE__*/ _react.default.createElement(
           Container,
           {
@@ -643,7 +654,8 @@
               renderError({
                 App: CachedApp,
                 err: error
-              }).catch(err => console.error("Error rendering page: ", err))
+              }).catch(err => console.error("Error rendering page: ", err)),
+            wasBrowserNavigation: wasBrowserNavigation
           },
           /*#__PURE__*/ _react.default.createElement(
             _routerContext.RouterContext.Provider,
@@ -679,7 +691,14 @@
       };
 
       function doRender(_ref6) {
-        var { App, Component, props, err, styleSheets } = _ref6;
+        var {
+          App,
+          Component,
+          props,
+          err,
+          styleSheets,
+          wasBrowserNavigation
+        } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
         var appProps = (0, _extends2.default)(
@@ -816,7 +835,9 @@
           },
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
-            null,
+            {
+              wasBrowserNavigation: wasBrowserNavigation
+            },
             /*#__PURE__*/ _react.default.createElement(App, appProps)
           )
         );
Diff for index.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -118,13 +118,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -87,13 +87,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -123,13 +123,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -118,13 +118,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
buildDuration 12.1s 12s -80ms
nodeModulesSize 57.4 MB 57.4 MB ⚠️ +1.45 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..f20b.js gzip 10.3 kB N/A N/A
framework.HASH.js gzip 39 kB 39 kB
main-49b1fd5..c64c.js gzip 7.35 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B
677f882d2ed8..b756.js gzip N/A 10.3 kB N/A
main-36a435d..b966.js gzip N/A 7.39 kB N/A
Overall change 57.3 kB 57.4 kB ⚠️ +72 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..dule.js gzip 6.13 kB N/A N/A
framework.HA..dule.js gzip 39 kB 39 kB
main-99715b4..dule.js gzip 6.4 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B
677f882d2ed8..dule.js gzip N/A 6.16 kB N/A
main-aa468fa..dule.js gzip N/A 6.44 kB N/A
Overall change 52.2 kB 52.3 kB ⚠️ +65 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB
_error-28298..e0c9.js gzip 3.44 kB 3.44 kB
hooks-89731c..c609.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-000f151..65d4.js gzip 1.29 kB 1.29 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 7.69 kB 7.69 kB
Client Pages Modern
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-75d3a82..dule.js gzip 625 B 625 B
_error-65c8a..dule.js gzip 2.29 kB 2.29 kB
hooks-cbf13f..dule.js gzip 387 B 387 B
index-b9a643..dule.js gzip 226 B 226 B
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-f..dule.js gzip 282 B 282 B
Overall change 5.35 kB 5.35 kB
Client Build Manifests
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_buildManifest.js gzip 322 B 322 B
_buildManife..dule.js gzip 330 B 330 B
Overall change 652 B 652 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_error.js 1.03 MB 1.03 MB
404.html 4.22 kB 4.22 kB
hooks.html 3.86 kB 3.86 kB
index.js 1.03 MB 1.03 MB
link.js 1.07 MB 1.07 MB ⚠️ +107 B
routerDirect.js 1.07 MB 1.07 MB ⚠️ +107 B
withRouter.js 1.07 MB 1.07 MB ⚠️ +107 B
Overall change 5.28 MB 5.28 MB ⚠️ +321 B
Commit: 51de53acabd09569219fd24ca553f5a99c9ad1b4

ijjk avatar Aug 31 '20 16:08 ijjk

Failing test suites

Commit: 51de53acabd09569219fd24ca553f5a99c9ad1b4

test/integration/build-output/test/index.test.js

  • Build Output > Basic Application Output > should not deviate from snapshot
Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.10000000000000142

  105 |       expect(err404FirstLoad.endsWith('kB')).toBe(true)
  106 | 
> 107 |       expect(parseFloat(sharedByAll) - 59.9).toBeLessThanOrEqual(0)
      |                                              ^
  108 |       expect(sharedByAll.endsWith('kB')).toBe(true)
  109 | 
  110 |       if (_appSize.endsWith('kB')) {

  at Object.<anonymous> (integration/build-output/test/index.test.js:107:46)

ijjk avatar Aug 31 '20 16:08 ijjk

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
buildDuration 12.5s 12.5s -13ms
nodeModulesSize 57.4 MB 57.4 MB ⚠️ +1.45 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
/ failed reqs 0 0
/ total time (seconds) 2.28 2.317 ⚠️ +0.04
/ avg req/sec 1096.46 1078.87 ⚠️ -17.59
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.208 1.253 ⚠️ +0.04
/error-in-render avg req/sec 2070.38 1995.45 ⚠️ -74.93
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..f20b.js gzip 10.3 kB 10.3 kB ⚠️ +25 B
framework.HASH.js gzip 39 kB 39 kB
main-49b1fd5..c64c.js gzip 7.35 kB 7.39 kB ⚠️ +47 B
webpack-e067..f178.js gzip 751 B 751 B
Overall change 57.3 kB 57.4 kB ⚠️ +72 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..dule.js gzip 6.13 kB 6.16 kB ⚠️ +30 B
framework.HA..dule.js gzip 39 kB 39 kB
main-99715b4..dule.js gzip 6.4 kB 6.44 kB ⚠️ +35 B
webpack-07c5..dule.js gzip 751 B 751 B
Overall change 52.2 kB 52.3 kB ⚠️ +65 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB
_error-28298..e0c9.js gzip 3.44 kB 3.44 kB
hooks-89731c..c609.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-000f151..65d4.js gzip 1.29 kB 1.29 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 7.69 kB 7.69 kB
Client Pages Modern
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-75d3a82..dule.js gzip 625 B 625 B
_error-65c8a..dule.js gzip 2.29 kB 2.29 kB
hooks-cbf13f..dule.js gzip 387 B 387 B
index-b9a643..dule.js gzip 226 B 226 B
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-f..dule.js gzip 282 B 282 B
Overall change 5.35 kB 5.35 kB
Client Build Manifests
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_buildManifest.js gzip 322 B 322 B
_buildManife..dule.js gzip 330 B 330 B
Overall change 652 B 652 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
index.html gzip 971 B 971 B
link.html gzip 977 B 979 B ⚠️ +2 B
withRouter.html gzip 964 B 964 B
Overall change 2.91 kB 2.91 kB ⚠️ +2 B

Diffs

Diff for 677f882d2ed8..60.module.js
@@ -791,7 +791,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               url,
               as,
               Object.assign({}, options, {
-                shallow: options.shallow && this._shallow
+                shallow: options.shallow && this._shallow,
+                wasBrowserNavigation: true
               })
             );
           }; // represents the current component key
@@ -1041,6 +1042,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               as,
               shallow
             );
+            routeInfo.wasBrowserNavigation = !!options.wasBrowserNavigation;
             var { error } = routeInfo;
             Router.events.emit("beforeHistoryChange", as);
             this.changeState(method, url, as, options);
Diff for 677f882d2ed8..886051899.js
@@ -944,7 +944,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               url,
               as,
               Object.assign({}, options, {
-                shallow: options.shallow && _this._shallow
+                shallow: options.shallow && _this._shallow,
+                wasBrowserNavigation: true
               })
             );
           }; // represents the current component key
@@ -1297,6 +1298,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
                           case 51:
                             routeInfo = _context.sent;
+                            routeInfo.wasBrowserNavigation = !!options.wasBrowserNavigation;
                             error = routeInfo.error;
                             Router.events.emit("beforeHistoryChange", as);
                             this.changeState(method, url, as, options);
@@ -1304,7 +1306,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (false) {
                             }
 
-                            _context.next = 58;
+                            _context.next = 59;
                             return this.set(
                               route,
                               pathname,
@@ -1316,9 +1318,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               else throw e;
                             });
 
-                          case 58:
+                          case 59:
                             if (!error) {
-                              _context.next = 61;
+                              _context.next = 62;
                               break;
                             }
 
@@ -1329,28 +1331,28 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             throw error;
 
-                          case 61:
+                          case 62:
                             if (false) {
                             }
 
                             Router.events.emit("routeChangeComplete", as);
                             return _context.abrupt("return", true);
 
-                          case 66:
-                            _context.prev = 66;
+                          case 67:
+                            _context.prev = 67;
                             _context.t0 = _context["catch"](48);
 
                             if (!_context.t0.cancelled) {
-                              _context.next = 70;
+                              _context.next = 71;
                               break;
                             }
 
                             return _context.abrupt("return", false);
 
-                          case 70:
+                          case 71:
                             throw _context.t0;
 
-                          case 71:
+                          case 72:
                           case "end":
                             return _context.stop();
                         }
@@ -1358,7 +1360,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     },
                     _callee,
                     this,
-                    [[48, 66]]
+                    [[48, 67]]
                   );
                 })
               );
Diff for main-b79b1e5..d98106011.js
@@ -424,7 +424,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           {
             key: "componentDidUpdate",
             value: function componentDidUpdate() {
-              this.scrollToHash();
+              // Do not scroll to hash when an update is triggered as a result
+              // of the user navigating via the browser back/forward buttons
+              if (!this.props.wasBrowserNavigation) {
+                this.scrollToHash();
+              }
             }
           },
           {
@@ -610,13 +614,15 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             var Component = _ref5.Component,
                               styleSheets = _ref5.styleSheets,
                               props = _ref5.props,
-                              err = _ref5.err;
+                              err = _ref5.err,
+                              wasBrowserNavigation = _ref5.wasBrowserNavigation;
                             return render({
                               App: App,
                               Component: Component,
                               styleSheets: styleSheets,
                               props: props,
-                              err: err
+                              err: err,
+                              wasBrowserNavigation: wasBrowserNavigation
                             });
                           }
                         }
@@ -889,7 +895,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       }
 
       function AppContainer(_ref7) {
-        var children = _ref7.children;
+        var children = _ref7.children,
+          wasBrowserNavigation = _ref7.wasBrowserNavigation;
         return /*#__PURE__*/ _react["default"].createElement(
           Container,
           {
@@ -900,7 +907,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               })["catch"](function(err) {
                 return console.error("Error rendering page: ", err);
               });
-            }
+            },
+            wasBrowserNavigation: wasBrowserNavigation
           },
           /*#__PURE__*/ _react["default"].createElement(
             _routerContext.RouterContext.Provider,
@@ -942,7 +950,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           Component = _ref8.Component,
           props = _ref8.props,
           err = _ref8.err,
-          styleSheets = _ref8.styleSheets;
+          styleSheets = _ref8.styleSheets,
+          wasBrowserNavigation = _ref8.wasBrowserNavigation;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
         var appProps = (0, _extends2["default"])(
@@ -1086,7 +1095,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           },
           /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
-            null,
+            {
+              wasBrowserNavigation: wasBrowserNavigation
+            },
             /*#__PURE__*/ _react["default"].createElement(App, appProps)
           )
         );
Diff for main-e4ec5a0..88.module.js
@@ -318,7 +318,11 @@
         }
 
         componentDidUpdate() {
-          this.scrollToHash();
+          // Do not scroll to hash when an update is triggered as a result
+          // of the user navigating via the browser back/forward buttons
+          if (!this.props.wasBrowserNavigation) {
+            this.scrollToHash();
+          }
         }
 
         scrollToHash() {
@@ -429,13 +433,20 @@
             err: initialErr,
             isFallback: Boolean(isFallback),
             subscription: (_ref3, App) => {
-              var { Component, styleSheets, props, err } = _ref3;
+              var {
+                Component,
+                styleSheets,
+                props,
+                err,
+                wasBrowserNavigation
+              } = _ref3;
               return render({
                 App,
                 Component,
                 styleSheets,
                 props,
-                err
+                err,
+                wasBrowserNavigation
               });
             }
           }
@@ -635,7 +646,7 @@
       }
 
       function AppContainer(_ref5) {
-        var { children } = _ref5;
+        var { children, wasBrowserNavigation } = _ref5;
         return /*#__PURE__*/ _react.default.createElement(
           Container,
           {
@@ -643,7 +654,8 @@
               renderError({
                 App: CachedApp,
                 err: error
-              }).catch(err => console.error("Error rendering page: ", err))
+              }).catch(err => console.error("Error rendering page: ", err)),
+            wasBrowserNavigation: wasBrowserNavigation
           },
           /*#__PURE__*/ _react.default.createElement(
             _routerContext.RouterContext.Provider,
@@ -679,7 +691,14 @@
       };
 
       function doRender(_ref6) {
-        var { App, Component, props, err, styleSheets } = _ref6;
+        var {
+          App,
+          Component,
+          props,
+          err,
+          styleSheets,
+          wasBrowserNavigation
+        } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
         var appProps = (0, _extends2.default)(
@@ -816,7 +835,9 @@
           },
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
-            null,
+            {
+              wasBrowserNavigation: wasBrowserNavigation
+            },
             /*#__PURE__*/ _react.default.createElement(App, appProps)
           )
         );
Diff for index.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -118,13 +118,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -87,13 +87,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -123,13 +123,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html
@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      href="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -25,7 +25,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-b79b1e531d6d98106011.js"
+      src="/_next/static/chunks/main-db781cbcb759efd196ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e4ec5a082a22aa0ac788.module.js"
+      src="/_next/static/chunks/main-6cede4fd7bb86685bdb2.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -118,13 +118,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b1af6078fa6886051899.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8a1fc2425aad39c1b816.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2206d208af7e83206260.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.7df28254fceb142804a8.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
buildDuration 14.2s 13.9s -239ms
nodeModulesSize 57.4 MB 57.4 MB ⚠️ +1.45 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..f20b.js gzip 10.3 kB N/A N/A
framework.HASH.js gzip 39 kB 39 kB
main-49b1fd5..c64c.js gzip 7.35 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B
677f882d2ed8..b756.js gzip N/A 10.3 kB N/A
main-36a435d..b966.js gzip N/A 7.39 kB N/A
Overall change 57.3 kB 57.4 kB ⚠️ +72 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
677f882d2ed8..dule.js gzip 6.13 kB N/A N/A
framework.HA..dule.js gzip 39 kB 39 kB
main-99715b4..dule.js gzip 6.4 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B
677f882d2ed8..dule.js gzip N/A 6.16 kB N/A
main-aa468fa..dule.js gzip N/A 6.44 kB N/A
Overall change 52.2 kB 52.3 kB ⚠️ +65 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB
_error-28298..e0c9.js gzip 3.44 kB 3.44 kB
hooks-89731c..c609.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-000f151..65d4.js gzip 1.29 kB 1.29 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 7.69 kB 7.69 kB
Client Pages Modern
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_app-75d3a82..dule.js gzip 625 B 625 B
_error-65c8a..dule.js gzip 2.29 kB 2.29 kB
hooks-cbf13f..dule.js gzip 387 B 387 B
index-b9a643..dule.js gzip 226 B 226 B
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-f..dule.js gzip 282 B 282 B
Overall change 5.35 kB 5.35 kB
Client Build Manifests
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_buildManifest.js gzip 322 B 322 B
_buildManife..dule.js gzip 330 B 330 B
Overall change 652 B 652 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary Xorhail/next.js fix/scroll-hash-browser-navigation Change
_error.js 1.03 MB 1.03 MB
404.html 4.22 kB 4.22 kB
hooks.html 3.86 kB 3.86 kB
index.js 1.03 MB 1.03 MB
link.js 1.07 MB 1.07 MB ⚠️ +107 B
routerDirect.js 1.07 MB 1.07 MB ⚠️ +107 B
withRouter.js 1.07 MB 1.07 MB ⚠️ +107 B
Overall change 5.28 MB 5.28 MB ⚠️ +321 B
Commit: 073006321d7742ff08fc995ddf16ead257a4b56d

ijjk avatar Aug 31 '20 17:08 ijjk

Not sure why the tests are failing, I can see the following in the logs:

NoSuchSessionError: No active session with ID

Would anyone be able to help me with this please?

tim-crisp avatar Aug 31 '20 17:08 tim-crisp

Hey @tim-crisp, are you still working on this? Sorry that we haven't helped you debug those tests earlier.

I will close this PR as it has a bunch of conflicts. Please open a new PR if you find the time to update this branch because that issue is still relevant. I'd love to assist you if you need any help.

jankaifer avatar Nov 23 '22 16:11 jankaifer