Wait for build manifest promise before page load or prefetch

vercel · Aug 6, 2019 · c370528 · c370528
1 parent c63cb4b
commit c370528
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/packages/next/build/webpack/plugins/build-manifest-plugin.ts b/packages/next/build/webpack/plugins/build-manifest-plugin.ts
@@ -162,7 +162,8 @@ export default class BuildManifestPlugin {
             `self.__BUILD_MANIFEST = JSON.parse('${generateClientManifest(
               assetMap,
               false
-            )}')`
+            )}')
+            self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
           )
 
           if (this.modern) {
@@ -174,7 +175,8 @@ export default class BuildManifestPlugin {
               `self.__BUILD_MANIFEST = JSON.parse('${generateClientManifest(
                 assetMap,
                 true
-              )}')`
+              )}')
+              self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
             )
           }
         }

diff --git a/packages/next/build/webpack/plugins/next-esm-plugin.ts b/packages/next/build/webpack/plugins/next-esm-plugin.ts
@@ -43,6 +43,7 @@ const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin')
 const JsonpTemplatePlugin = require('webpack/lib/web/JsonpTemplatePlugin')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const RuntimeChunkPlugin = require('webpack/lib/optimize/RuntimeChunkPlugin')
+const util = require('util')
 
 const PLUGIN_NAME = 'NextEsmPlugin'
 
@@ -234,6 +235,9 @@ export default class NextEsmPlugin implements Plugin {
         ).apply(childCompiler)
       }
     }
+    console.log('IN NEXT ESM PLUGIN')
+    console.log('COMPILER IS: ' + util.inspect(compiler))
+    console.log('CHILD COMPILER IS: ' + util.inspect(childCompiler))
 
     compilation.hooks.additionalAssets.tapAsync(
       PLUGIN_NAME,

diff --git a/packages/next/client/page-loader.js b/packages/next/client/page-loader.js
@@ -21,14 +21,6 @@ function preloadScript (url) {
   document.head.appendChild(link)
 }
 
-// Retrieve a list of dependencies for a given route from the build manifest
-function getDependencies (route, _m) {
-  if ((_m = window.__BUILD_MANIFEST) && (_m = _m[route])) {
-    return _m.map(url => `/_next/${url}`)
-  }
-  return []
-}
-
 export default class PageLoader {
   constructor (buildId, assetPrefix) {
     this.buildId = buildId
@@ -38,6 +30,22 @@ export default class PageLoader {
     this.pageRegisterEvents = mitt()
     this.loadingRoutes = {}
     this.promisedBuildId = Promise.resolve()
+    this.promisedBuildManifest = new Promise(resolve => {
+      if (window.__BUILD_MANIFEST) {
+        resolve(window.__BUILD_MANIFEST)
+      } else {
+        window.__BUILD_MANIFEST_CB = () => {
+          resolve(window.__BUILD_MANIFEST)
+        }
+      }
+    })
+  }
+
+  // Returns a promise for the dependencies for a particular route
+  getDependencies (route) {
+    return this.promisedBuildManifest.then(
+      man => (man[route] && man.map(url => `/_next/${url}`)) || []
+    )
   }
 
   normalizeRoute (route) {
@@ -83,13 +91,15 @@ export default class PageLoader {
       }
 
       if (!this.loadingRoutes[route]) {
-        getDependencies(route).forEach(d => {
-          if (!document.querySelector(`script[src^="${d}"]`)) {
-            this.loadScript(d, route, false)
-          }
+        this.getDependencies(route).then(deps => {
+          deps.forEach(d => {
+            if (!document.querySelector(`script[src^="${d}"]`)) {
+              this.loadScript(d, route, false)
+            }
+          })
+          this.loadRoute(route)
+          this.loadingRoutes[route] = true
         })
-        this.loadRoute(route)
-        this.loadingRoutes[route] = true
       }
     })
   }
@@ -225,7 +235,7 @@ export default class PageLoader {
     }
 
     if (!isDependency) {
-      getDependencies(route).forEach(url => {
+      ;(await this.getDependencies(route)).forEach(url => {
         this.prefetch(url, true)
       })
     }