Load everything async.

client/index.js

@@ -34,30 +34,32 @@ if (window.__NEXT_LOADED_PAGES__) {
   delete window.__NEXT_LOADED_PAGES__
 }
 
-const ErrorComponent = pageLoader.loadPageSync('/_error')
-let Component
-
-try {
-  Component = pageLoader.loadPageSync(pathname)
-} catch (err) {
-  console.error(`${err.message}\n${err.stack}`)
-  Component = ErrorComponent
-}
-
-let lastAppProps
-
-export const router = createRouter(pathname, query, getURL(), {
-  pageLoader,
-  Component,
-  ErrorComponent,
-  err
-})
-
 const headManager = new HeadManager()
 const appContainer = document.getElementById('__next')
 const errorContainer = document.getElementById('__next-error')
 
-export default () => {
+let lastAppProps
+export let router
+export let ErrorComponent
+let Component
+
+export default async () => {
+  ErrorComponent = await pageLoader.loadPage('/_error')
+
+  try {
+    Component = await pageLoader.loadPage(pathname)
+  } catch (err) {
+    console.error(`${err.message}\n${err.stack}`)
+    Component = ErrorComponent
+  }
+
+  router = createRouter(pathname, query, getURL(), {
+    pageLoader,
+    Component,
+    ErrorComponent,
+    err
+  })
+
   const emitter = mitt()
 
   router.subscribe(({ Component, props, hash, err }) => {
@@ -120,7 +122,7 @@ async function doRender ({ Component, props, hash, err, emitter }) {
   }
 
   if (emitter) {
-    emitter.emit('before-reactdom-render', { Component })
+    emitter.emit('before-reactdom-render', { Component, ErrorComponent })
   }
 
   Component = Component || lastAppProps.Component
@@ -135,6 +137,6 @@ async function doRender ({ Component, props, hash, err, emitter }) {
   ReactDOM.render(createElement(App, appProps), appContainer)
 
   if (emitter) {
-    emitter.emit('after-reactdom-render', { Component })
+    emitter.emit('after-reactdom-render', { Component, ErrorComponent })
   }
 }

client/next-dev.js

@@ -1,14 +1,40 @@
-import evalScript from '../lib/eval-script'
+import 'react-hot-loader/patch'
 import ReactReconciler from 'react-dom/lib/ReactReconciler'
-
-const { __NEXT_DATA__: { errorComponent } } = window
-const ErrorComponent = evalScript(errorComponent).default
-
-require('react-hot-loader/patch')
+import initOnDemandEntries from './on-demand-entries-client'
+import initWebpackHMR from './webpack-hot-middleware-client'
 
 const next = window.next = require('./')
 
-const emitter = next.default()
+next.default()
+  .then((emitter) => {
+    initOnDemandEntries()
+    initWebpackHMR()
+
+    let lastScroll
+
+    emitter.on('before-reactdom-render', ({ Component, ErrorComponent }) => {
+      // Remember scroll when ErrorComponent is being rendered to later restore it
+      if (!lastScroll && Component === ErrorComponent) {
+        const { pageXOffset, pageYOffset } = window
+        lastScroll = {
+          x: pageXOffset,
+          y: pageYOffset
+        }
+      }
+    })
+
+    emitter.on('after-reactdom-render', ({ Component, ErrorComponent }) => {
+      if (lastScroll && Component !== ErrorComponent) {
+        // Restore scroll after ErrorComponent was replaced with a page component by HMR
+        const { x, y } = lastScroll
+        window.scroll(x, y)
+        lastScroll = null
+      }
+    })
+  })
+  .catch((err) => {
+    console.error(`${err.message}\n${err.stack}`)
+  })
 
 // This is a patch to catch most of the errors throw inside React components.
 const originalMountComponent = ReactReconciler.mountComponent
@@ -21,25 +47,3 @@ ReactReconciler.mountComponent = function (...args) {
     throw err
   }
 }
-
-let lastScroll
-
-emitter.on('before-reactdom-render', ({ Component }) => {
-  // Remember scroll when ErrorComponent is being rendered to later restore it
-  if (!lastScroll && Component === ErrorComponent) {
-    const { pageXOffset, pageYOffset } = window
-    lastScroll = {
-      x: pageXOffset,
-      y: pageYOffset
-    }
-  }
-})
-
-emitter.on('after-reactdom-render', ({ Component }) => {
-  if (lastScroll && Component !== ErrorComponent) {
-    // Restore scroll after ErrorComponent was replaced with a page component by HMR
-    const { x, y } = lastScroll
-    window.scroll(x, y)
-    lastScroll = null
-  }
-})

client/next.js

@@ -1,3 +1,6 @@
 import next from './'
 
 next()
+  .catch((err) => {
+    console.error(`${err.message}\n${err.stack}`)
+  })

client/on-demand-entries-client.js

@@ -3,11 +3,12 @@
 import Router from '../lib/router'
 import fetch from 'unfetch'
 
-Router.ready(() => {
+export default () => {
+  Router.ready(() => {
     Router.router.events.on('routeChangeComplete', ping)
-})
+  })
 
-async function ping () {
+  async function ping () {
     try {
       const url = `/_next/on-demand-entries-ping?page=${Router.pathname}`
       const res = await fetch(url)
@@ -18,16 +19,17 @@ async function ping () {
     } catch (err) {
       console.error(`Error with on-demand-entries-ping: ${err.message}`)
     }
-}
+  }
 
-async function runPinger () {
+  async function runPinger () {
     while (true) {
       await new Promise((resolve) => setTimeout(resolve, 5000))
       await ping()
     }
-}
+  }
 
-runPinger()
+  runPinger()
     .catch((err) => {
       console.error(err)
     })
+}

client/webpack-hot-middleware-client.js

@@ -1,7 +1,8 @@
 import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?overlay=false&reload=true'
 import Router from '../lib/router'
 
-const handlers = {
+export default () => {
+  const handlers = {
     reload (route) {
       if (route === '/_error') {
         for (const r of Object.keys(Router.components)) {
@@ -35,9 +36,9 @@ const handlers = {
         Router.reload(route)
       }
     }
-}
+  }
 
-webpackHotMiddlewareClient.subscribe((obj) => {
+  webpackHotMiddlewareClient.subscribe((obj) => {
     const fn = handlers[obj.action]
     if (fn) {
       const data = obj.data || []
@@ -45,4 +46,5 @@ webpackHotMiddlewareClient.subscribe((obj) => {
     } else {
       throw new Error('Unexpected action ' + obj.action)
     }
-})
+  })
+}

server/document.js

@@ -103,8 +103,8 @@ export class NextScript extends Component {
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
         __html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
       }} />}
-      <script type='text/javascript' src={`/_next/${buildId}/page${pathname}`} />
-      <script type='text/javascript' src={`/_next/${buildId}/page/_error`} />
+      <script async type='text/javascript' src={`/_next/${buildId}/page${pathname}`} />
+      <script async type='text/javascript' src={`/_next/${buildId}/page/_error`} />
       {staticMarkup ? null : this.getScripts()}
     </div>
   }

server/hot-reloader.js

@@ -5,7 +5,6 @@ import onDemandEntryHandler from './on-demand-entry-handler'
 import isWindowsBash from 'is-windows-bash'
 import webpack from './build/webpack'
 import clean from './build/clean'
-import readPage from './read-page'
 import getConfig from './config'
 
 export default class HotReloader {
@@ -202,7 +201,6 @@ export default class HotReloader {
 
 function deleteCache (path) {
   delete require.cache[path]
-  delete readPage.cache[path]
 }
 
 function diff (a, b) {

server/read-page.js

@@ -1,23 +0,0 @@
-import fs from 'mz/fs'
-import resolve from './resolve'
-
-/**
- * resolve a JSON page like `require.resolve`,
- * and read and cache the file content
- */
-
-async function readPage (path) {
-  const f = await resolve(path)
-  if (cache.hasOwnProperty(f)) {
-    return cache[f]
-  }
-
-  const source = await fs.readFile(f, 'utf8')
-  cache[f] = source
-  return source
-}
-
-export default readPage
-export const cache = {}
-
-readPage.cache = cache