diff --git a/packages/next/client/route-loader.ts b/packages/next/client/route-loader.ts index 312d56bcf13cd..2fc72788d304d 100644 --- a/packages/next/client/route-loader.ts +++ b/packages/next/client/route-loader.ts @@ -152,35 +152,6 @@ function appendScript( // 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. let devBuildPromise: Promise | undefined -let devBuildResolve: (() => void) | undefined - -if (process.env.NODE_ENV === 'development') { - const { addMessageListener } = require('./dev/error-overlay/eventsource') - - addMessageListener((event: any) => { - // This is the heartbeat event - if (event.data === '\uD83D\uDC93') { - return - } - - const obj = - typeof event === 'string' ? { action: event } : JSON.parse(event.data) - - switch (obj.action) { - case 'built': - case 'sync': - if (devBuildResolve) { - devBuildResolve() - devBuildResolve = undefined - } - - break - - default: - break - } - }) -} // Resolve a promise that times out after given amount of milliseconds. function resolvePromiseWithTimeout( @@ -356,28 +327,34 @@ export function createRouteLoader(assetPrefix: string): RouteLoader { }, loadRoute(route: string, prefetch?: boolean) { return withFuture(route, routes, () => { + const routeFilesPromise = getFilesForRoute(assetPrefix, route) + .then(({ scripts, css }) => { + return Promise.all([ + entrypoints.has(route) + ? [] + : Promise.all(scripts.map(maybeExecuteScript)), + Promise.all(css.map(fetchStyleSheet)), + ] as const) + }) + .then((res) => { + return this.whenEntrypoint(route).then((entrypoint) => ({ + entrypoint, + styles: res[1], + })) + }) + if (process.env.NODE_ENV === 'development') { devBuildPromise = new Promise((resolve) => { - devBuildResolve = resolve + if (routeFilesPromise) { + return routeFilesPromise.finally(() => { + resolve() + }) + } }) } return resolvePromiseWithTimeout( - getFilesForRoute(assetPrefix, route) - .then(({ scripts, css }) => { - return Promise.all([ - entrypoints.has(route) - ? [] - : Promise.all(scripts.map(maybeExecuteScript)), - Promise.all(css.map(fetchStyleSheet)), - ] as const) - }) - .then((res) => { - return this.whenEntrypoint(route).then((entrypoint) => ({ - entrypoint, - styles: res[1], - })) - }), + routeFilesPromise, MS_MAX_IDLE_DELAY, markAssetError(new Error(`Route did not complete loading: ${route}`)) )