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')
+const headManager = new HeadManager()
+const appContainer = document.getElementById('__next')
+const errorContainer = document.getElementById('__next-error')
+
+let lastAppProps
+export let router
+export let ErrorComponent
 let Component
 
+export default async () => {
+  ErrorComponent = await pageLoader.loadPage('/_error')
+
   try {
-  Component = pageLoader.loadPageSync(pathname)
+    Component = await pageLoader.loadPage(pathname)
   } catch (err) {
     console.error(`${err.message}\n${err.stack}`)
     Component = ErrorComponent
   }
 
-let lastAppProps
-
-export const router = createRouter(pathname, query, getURL(), {
+  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 () => {
   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,6 +3,7 @@
 import Router from '../lib/router'
 import fetch from 'unfetch'
 
+export default () => {
   Router.ready(() => {
     Router.router.events.on('routeChangeComplete', ping)
   })
@@ -31,3 +32,4 @@ runPinger()
     .catch((err) => {
       console.error(err)
     })
+}

client/webpack-hot-middleware-client.js

@@ -1,6 +1,7 @@
 import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?overlay=false&reload=true'
 import Router from '../lib/router'
 
+export default () => {
   const handlers = {
     reload (route) {
       if (route === '/_error') {
@@ -46,3 +47,4 @@ webpackHotMiddlewareClient.subscribe((obj) => {
       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