import 'event-source-polyfill' import connect from './dev-error-overlay/hot-dev-client' import Router from 'next/router' const handlers = { reload (route) { // If the App component changes we have to reload the current route, this is handled by hot-self-accept-loader // So we just return if (route === '/_app') { return } if (route === '/_error') { for (const r of Object.keys(Router.components)) { const { err } = Router.components[r] if (err) { // reload all error routes // which are expected to be errors of '/_error' routes Router.reload(r) } } return } // Since _document is server only we need to reload the full page when it changes. if (route === '/_document') { window.location.reload() return } Router.reload(route) }, change (route) { // If the App component changes we have to reload the current route, this is handled by hot-self-accept-loader // So we just return if (route === '/_app') { return } const { err, Component } = Router.components[route] || {} if (err) { // reload to recover from runtime errors Router.reload(route) } if (Router.route !== route) { // If this is a not a change for a currently viewing page. // We don't need to worry about it. return } if (!Component) { // This only happens when we create a new page without a default export. // If you removed a default export from a exising viewing page, this has no effect. console.warn(`Hard reloading due to no default component in page: ${route}`) window.location.reload() } } } export default ({assetPrefix}) => { const options = { path: `${assetPrefix}/_next/webpack-hmr` } const devClient = connect(options) devClient.subscribeToHmrEvent((obj) => { const fn = handlers[obj.action] if (fn) { const data = obj.data || [] fn(...data) } else { throw new Error('Unexpected action ' + obj.action) } }) return devClient }