Use the new SingletonRouter for HMR error handling.

client/next.js

@@ -21,17 +21,12 @@ const {
 const Component = evalScript(component).default
 const ErrorComponent = evalScript(errorComponent).default
 
-const router = createRouter(pathname, query, {
+export const router = createRouter(pathname, query, {
   Component,
   ErrorComponent,
   ctx: { err }
 })
 
-// This it to support error handling in the dev time with hot code reload.
-if (window.next) {
-  window.next.router = router
-}
-
 const headManager = new HeadManager()
 const container = document.getElementById('__next')
 const appProps = { Component, props, router, headManager }

client/webpack-hot-middleware-client.js

@@ -1,27 +1,27 @@
-/* global next */
 import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?overlay=false&reload=true'
+import Router from '../lib/router'
 
 const handlers = {
   reload (route) {
     if (route === '/_error') {
-      for (const r of Object.keys(next.router.components)) {
-        const { Component } = next.router.components[r]
+      for (const r of Object.keys(Router.components)) {
+        const { Component } = Router.components[r]
         if (Component.__route === '/_error-debug') {
           // reload all '/_error-debug'
           // which are expected to be errors of '/_error' routes
-          next.router.reload(r)
+          Router.reload(r)
         }
       }
       return
     }
 
-    next.router.reload(route)
+    Router.reload(route)
   },
   change (route) {
-    const { Component } = next.router.components[route] || {}
+    const { Component } = Router.components[route] || {}
     if (Component && Component.__route === '/_error-debug') {
       // reload to recover from runtime errors
-      next.router.reload(route)
+      Router.reload(route)
     }
   },
   hardReload () {

lib/router/index.js

@@ -13,19 +13,26 @@ export const createRouter = function (...args) {
 
   router = new _Router(...args)
 
-  // Assign the router to the SingletonRouter object
-  for (const name of router) {
-    const property = router[name]
-    if (typeof property === 'function') {
-      SingletonRouter[name] = router[name].bind(router)
-    } else {
-      Object.defineProperty(SingletonRouter, name, {
-        get () {
-          return router[name]
-        }
-      })
-    }
-  }
+  // Move public properties and method from the actual router
+  // instance to the SingletonRouter
+  const propertyFields = ['route', 'components', 'pathname', 'query']
+  const methodFields = ['push', 'replace', 'reload', 'back']
+
+  propertyFields.forEach((field) => {
+    // Here we need to use Object.defineProperty because, we need to return
+    // the property assigned to the actual router
+    // The value might get changed as we change routes and this is the
+    // proper way to access it
+    Object.defineProperty(SingletonRouter, field, {
+      get () {
+        return router[field]
+      }
+    })
+  })
+
+  methodFields.forEach((field) => {
+    SingletonRouter[field] = router[field].bind(router)
+  })
 
   return router
 }