Wait for getFilesForRoute promise to fulfill before timeout in dev mode

[jarvelov]

Fixes #25675

The fix in PR #25749 for #25675 only works some of the times. The reason why it doesn't work all of the time is because the devBuildResolve function is called when the assets have been built, but this can happen before the getFilesForRoute promise chain has fulfilled, and thus the cancelled variable in the resolvePromiseWithTimeout function could potentially not have been updated yet.

To fix this we wait for the getFilesForRoute promise chain to be fulfilled and then resolve the devBuildPromise promise afterwards. This allows the getFilesForRoute promise chain to be fulfilled before and the cancelled variable can be updated accordingly.

If an error is thrown somewhere in the getFilesForRoute promise chain, i.e. due to a failed fetch request, then that will also fulfill the devBuildPromise and the error will bubble up to ultimately become a routeChangeError, which will reload the page, as expected.

With this fix the need to listen for HMR events has become obsolete as regardless of when the HMR build/sync events complete we still want to ensure that the getFilesForRoute promise chain has been fulfilled before resolving the devBuildPromise.

Bug

• Related issues linked using fixes #number
• Integration tests added2567525675
• Errors have helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
buildDuration	14.7s	15.1s	⚠️ +386ms
buildDurationCached	3.3s	3.3s	-28ms
nodeModulesSize	49.5 MB	49.5 MB	-1.35 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.562	2.407	-0.15
/ avg req/sec	975.64	1038.56	+62.92
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.454	1.403	-0.05
/error-in-render avg req/sec	1719.38	1782.02	+62.64

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
359.HASH.js gzip	2.96 kB	2.96 kB	✓
745.HASH.js gzip	180 B	180 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	21 kB	21 kB	✓
webpack-HASH.js gzip	1.53 kB	1.53 kB	✓
Overall change	67.9 kB	67.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	554 B	554 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	2.28 kB	2.28 kB	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.63 kB	5.63 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	19.1 kB	19.1 kB	✓

Client Build Manifests

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
_buildManifest.js gzip	489 B	489 B	✓
Overall change	489 B	489 B	✓

Rendered Page Sizes

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
index.html gzip	530 B	530 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for main-HASH.js

@@ -2482,12 +2482,7 @@
       } // We wait for pages to be built in dev before we start the route transition
       // timeout to prevent an un-necessary hard navigation in development.
 
-      var devBuildPromise;
-      var devBuildResolve;
-
-      if (false) {
-        var _require, addMessageListener;
-      } // Resolve a promise that times out after given amount of milliseconds.
+      var devBuildPromise; // Resolve a promise that times out after given amount of milliseconds.
 
       function resolvePromiseWithTimeout(p, ms, err) {
         return new Promise(function(resolve, reject) {
@@ -2647,31 +2642,31 @@
             var _this = this;
 
             return withFuture(route, routes, function() {
+              var routeFilesPromise = getFilesForRoute(assetPrefix, route)
+                .then(function(_ref) {
+                  var scripts = _ref.scripts,
+                    css = _ref.css;
+                  return Promise.all([
+                    entrypoints.has(route)
+                      ? []
+                      : Promise.all(scripts.map(maybeExecuteScript)),
+                    Promise.all(css.map(fetchStyleSheet))
+                  ]);
+                })
+                .then(function(res) {
+                  return _this.whenEntrypoint(route).then(function(entrypoint) {
+                    return {
+                      entrypoint: entrypoint,
+                      styles: res[1]
+                    };
+                  });
+                });
+
               if (false) {
               }
 
               return resolvePromiseWithTimeout(
-                getFilesForRoute(assetPrefix, route)
-                  .then(function(_ref) {
-                    var scripts = _ref.scripts,
-                      css = _ref.css;
-                    return Promise.all([
-                      entrypoints.has(route)
-                        ? []
-                        : Promise.all(scripts.map(maybeExecuteScript)),
-                      Promise.all(css.map(fetchStyleSheet))
-                    ]);
-                  })
-                  .then(function(res) {
-                    return _this
-                      .whenEntrypoint(route)
-                      .then(function(entrypoint) {
-                        return {
-                          entrypoint: entrypoint,
-                          styles: res[1]
-                        };
-                      });
-                  }),
+                routeFilesPromise,
                 MS_MAX_IDLE_DELAY,
                 markAssetError(
                   new Error("Route did not complete loading: ".concat(route))

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54b2d7f5f69d6013116e.js"
+      src="/_next/static/chunks/main-e6e63898e6ec74ba0378.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54b2d7f5f69d6013116e.js"
+      src="/_next/static/chunks/main-e6e63898e6ec74ba0378.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54b2d7f5f69d6013116e.js"
+      src="/_next/static/chunks/main-e6e63898e6ec74ba0378.js"
       defer=""
     ></script>
     <script

---

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
buildDuration	11.7s	11.8s	⚠️ +87ms
buildDurationCached	4.5s	4.6s	⚠️ +29ms
nodeModulesSize	49.5 MB	49.5 MB	-1.35 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.506	2.492	-0.01
/ avg req/sec	997.49	1003.35	+5.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.438	1.401	-0.04
/error-in-render avg req/sec	1737.93	1784.79	+46.86

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
17.HASH.js gzip	2.98 kB	2.98 kB	✓
18.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	13.8 kB	13.8 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	8.4 kB	8.4 kB	✓
webpack-HASH.js gzip	1.22 kB	1.22 kB	✓
Overall change	68.5 kB	68.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.76 kB	3.76 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	3.02 kB	3.02 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.6 kB	17.6 kB	✓

Client Build Manifests

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	jarvelov/next.js fix-route-loader-dev	Change
index.html gzip	577 B	577 B	✓
link.html gzip	589 B	589 B	✓
withRouter.html gzip	569 B	570 B	⚠️ +1 B
Overall change	1.74 kB	1.74 kB	⚠️ +1 B

Diffs

Diff for 677f882d2ed8..c4df.HASH.js

@@ -867,12 +867,7 @@
       } // We wait for pages to be built in dev before we start the route transition
       // timeout to prevent an un-necessary hard navigation in development.
 
-      var devBuildPromise;
-      var devBuildResolve;
-
-      if (false) {
-        var _require, addMessageListener;
-      } // Resolve a promise that times out after given amount of milliseconds.
+      var devBuildPromise; // Resolve a promise that times out after given amount of milliseconds.
 
       function resolvePromiseWithTimeout(p, ms, err) {
         return new Promise(function(resolve, reject) {
@@ -1032,31 +1027,31 @@
             var _this = this;
 
             return withFuture(route, routes, function() {
+              var routeFilesPromise = getFilesForRoute(assetPrefix, route)
+                .then(function(_ref) {
+                  var scripts = _ref.scripts,
+                    css = _ref.css;
+                  return Promise.all([
+                    entrypoints.has(route)
+                      ? []
+                      : Promise.all(scripts.map(maybeExecuteScript)),
+                    Promise.all(css.map(fetchStyleSheet))
+                  ]);
+                })
+                .then(function(res) {
+                  return _this.whenEntrypoint(route).then(function(entrypoint) {
+                    return {
+                      entrypoint: entrypoint,
+                      styles: res[1]
+                    };
+                  });
+                });
+
               if (false) {
               }
 
               return resolvePromiseWithTimeout(
-                getFilesForRoute(assetPrefix, route)
-                  .then(function(_ref) {
-                    var scripts = _ref.scripts,
-                      css = _ref.css;
-                    return Promise.all([
-                      entrypoints.has(route)
-                        ? []
-                        : Promise.all(scripts.map(maybeExecuteScript)),
-                      Promise.all(css.map(fetchStyleSheet))
-                    ]);
-                  })
-                  .then(function(res) {
-                    return _this
-                      .whenEntrypoint(route)
-                      .then(function(entrypoint) {
-                        return {
-                          entrypoint: entrypoint,
-                          styles: res[1]
-                        };
-                      });
-                  }),
+                routeFilesPromise,
                 MS_MAX_IDLE_DELAY,
                 markAssetError(
                   new Error("Route did not complete loading: ".concat(route))

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bd3aee698f4a37984017.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.67199c98ca31edd10b07.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bd3aee698f4a37984017.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.67199c98ca31edd10b07.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.bd3aee698f4a37984017.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.67199c98ca31edd10b07.js"
       defer=""
     ></script>
     <script

Commit: b0564e0