diff --git a/client/index.js b/client/index.js
index 47d1bcc8..654dc39f 100644
--- a/client/index.js
+++ b/client/index.js
@@ -5,7 +5,6 @@ import { createRouter } from '../lib/router'
 import EventEmitter from '../lib/EventEmitter'
 import App from '../lib/app'
 import { loadGetInitialProps, getURL } from '../lib/utils'
-import ErrorDebugComponent from '../lib/error-debug'
 import PageLoader from '../lib/page-loader'
 
 // Polyfill Promise globally
@@ -53,14 +52,16 @@ const errorContainer = document.getElementById('__next-error')
 let lastAppProps
 export let router
 export let ErrorComponent
+let ErrorDebugComponent
 let Component
 
-export default async () => {
+export default async ({ ErrorDebugComponent: passedDebugComponent } = {}) => {
   // Wait for all the dynamic chunks to get loaded
   for (const chunkName of chunks) {
     await pageLoader.waitForChunk(chunkName)
   }
 
+  ErrorDebugComponent = passedDebugComponent
   ErrorComponent = await pageLoader.loadPage('/_error')
 
   try {
diff --git a/client/next-dev.js b/client/next-dev.js
index 38a369c2..204b0002 100644
--- a/client/next-dev.js
+++ b/client/next-dev.js
@@ -1,11 +1,12 @@
 import 'react-hot-loader/patch'
 import initNext, * as next from './'
+import ErrorDebugComponent from '../lib/error-debug'
 import initOnDemandEntries from './on-demand-entries-client'
 import initWebpackHMR from './webpack-hot-middleware-client'
 
 window.next = next
 
-initNext()
+initNext({ ErrorDebugComponent })
   .then((emitter) => {
     initOnDemandEntries()
     initWebpackHMR()