Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

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

Closed

Conversation

tim-crisp
Copy link

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 tim-crisp force-pushed the fix/scroll-hash-browser-navigation branch from f7f00a8 to 51de53a Compare August 31, 2020 16:34
@ijjk
Copy link
Member

ijjk commented Aug 31, 2020

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: f7f00a8

@ijjk
Copy link
Member

ijjk commented Aug 31, 2020

Failing test suites

Commit: f7f00a8

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
Copy link
Member

ijjk commented Aug 31, 2020

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: 51de53a

@ijjk
Copy link
Member

ijjk commented Aug 31, 2020

Failing test suites

Commit: 51de53a

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
Copy link
Member

ijjk commented Aug 31, 2020

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: 0730063

@tim-crisp
Copy link
Author

tim-crisp commented Aug 31, 2020

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?

@Timer Timer removed request for Timer and lfades December 8, 2021 19:08
@ijjk ijjk force-pushed the canary branch 3 times, most recently from df8579c to 47e5ebe Compare October 25, 2022 16:15
@jankaifer
Copy link
Contributor

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 jankaifer closed this Nov 23, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 24, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scrolling happens when user returns to a page with hash using browser back button
3 participants