diff --git a/packages/next/client/dev/amp-dev.js b/packages/next/client/dev/amp-dev.js
index f7bf79cddc83b..c4c829a680f53 100644
--- a/packages/next/client/dev/amp-dev.js
+++ b/packages/next/client/dev/amp-dev.js
@@ -1,6 +1,6 @@
 /* globals __webpack_hash__ */
 import EventSourcePolyfill from './event-source-polyfill'
-import { getEventSourceWrapper } from './error-overlay/eventsource'
+import { addMessageListener } from './error-overlay/eventsource'
 import { setupPing } from './on-demand-entries-utils'
 import { displayContent } from './fouc'
 
@@ -68,9 +68,7 @@ async function tryApplyUpdates() {
   }
 }
 
-getEventSourceWrapper({
-  path: `${assetPrefix}/_next/webpack-hmr`,
-}).addMessageListener((event) => {
+addMessageListener((event) => {
   if (event.data === '\uD83D\uDC93') {
     return
   }
diff --git a/packages/next/client/dev/dev-build-watcher.js b/packages/next/client/dev/dev-build-watcher.js
index 6b37a4f71a4f0..75e5f68cb423b 100644
--- a/packages/next/client/dev/dev-build-watcher.js
+++ b/packages/next/client/dev/dev-build-watcher.js
@@ -1,4 +1,4 @@
-import { getEventSourceWrapper } from './error-overlay/eventsource'
+import { addMessageListener } from './error-overlay/eventsource'
 
 export default function initializeBuildWatcher(toggleCallback) {
   const shadowHost = document.createElement('div')
@@ -39,8 +39,8 @@ export default function initializeBuildWatcher(toggleCallback) {
   let timeoutId = null
 
   // Handle events
-  const evtSource = getEventSourceWrapper({ path: '/_next/webpack-hmr' })
-  evtSource.addMessageListener((event) => {
+
+  addMessageListener((event) => {
     // This is the heartbeat event
     if (event.data === '\uD83D\uDC93') {
       return
diff --git a/packages/next/client/dev/error-overlay/eventsource.js b/packages/next/client/dev/error-overlay/eventsource.js
index 163cffc98e0b2..770eca8fd4738 100644
--- a/packages/next/client/dev/error-overlay/eventsource.js
+++ b/packages/next/client/dev/error-overlay/eventsource.js
@@ -57,6 +57,10 @@ function EventSourceWrapper(options) {
   }
 }
 
+export function addMessageListener(cb) {
+  eventCallbacks.push(cb)
+}
+
 export function getEventSourceWrapper(options) {
   if (!options.ondemand) {
     return {
diff --git a/packages/next/client/dev/error-overlay/hot-dev-client.js b/packages/next/client/dev/error-overlay/hot-dev-client.js
index c0854a3890840..6dc6547ce5842 100644
--- a/packages/next/client/dev/error-overlay/hot-dev-client.js
+++ b/packages/next/client/dev/error-overlay/hot-dev-client.js
@@ -28,7 +28,7 @@
 
 import * as DevOverlay from '@next/react-dev-overlay/lib/client'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
-import { getEventSourceWrapper } from './eventsource'
+import { addMessageListener } from './eventsource'
 import formatWebpackMessages from './format-webpack-messages'
 
 // This alternative WebpackDevServer combines the functionality of:
@@ -42,10 +42,10 @@ import formatWebpackMessages from './format-webpack-messages'
 
 let hadRuntimeError = false
 let customHmrEventHandler
-export default function connect(options) {
+export default function connect() {
   DevOverlay.register()
 
-  getEventSourceWrapper(options).addMessageListener((event) => {
+  addMessageListener((event) => {
     // This is the heartbeat event
     if (event.data === '\uD83D\uDC93') {
       return
diff --git a/packages/next/client/dev/on-demand-entries-utils.js b/packages/next/client/dev/on-demand-entries-utils.js
index 1c926177970a5..43fc5858a6f34 100644
--- a/packages/next/client/dev/on-demand-entries-utils.js
+++ b/packages/next/client/dev/on-demand-entries-utils.js
@@ -18,8 +18,10 @@ export function setupPing(assetPrefix, pathnameFn, retry) {
   // close current EventSource connection
   closePing()
 
-  const url = `${assetPrefix}/_next/webpack-hmr?page=${currentPage}`
-  evtSource = getEventSourceWrapper({ path: url, timeout: 5000, ondemand: 1 })
+  evtSource = getEventSourceWrapper({
+    path: `${assetPrefix}/_next/webpack-hmr?page=${currentPage}`,
+    timeout: 5000,
+  })
 
   evtSource.addMessageListener((event) => {
     if (event.data.indexOf('{') === -1) return
diff --git a/packages/next/client/dev/webpack-hot-middleware-client.js b/packages/next/client/dev/webpack-hot-middleware-client.js
index 42e072896048c..2a411b68833b5 100644
--- a/packages/next/client/dev/webpack-hot-middleware-client.js
+++ b/packages/next/client/dev/webpack-hot-middleware-client.js
@@ -1,11 +1,7 @@
 import connect from './error-overlay/hot-dev-client'
 
-export default ({ assetPrefix }) => {
-  const options = {
-    path: `${assetPrefix}/_next/webpack-hmr`,
-  }
-
-  const devClient = connect(options)
+export default () => {
+  const devClient = connect()
 
   devClient.subscribeToHmrEvent((obj) => {
     if (obj.action === 'reloadPage') {
diff --git a/packages/next/client/next-dev.js b/packages/next/client/next-dev.js
index dc5b3625b1824..bd7a59ebde543 100644
--- a/packages/next/client/next-dev.js
+++ b/packages/next/client/next-dev.js
@@ -5,7 +5,7 @@ import initOnDemandEntries from './dev/on-demand-entries-client'
 import initWebpackHMR from './dev/webpack-hot-middleware-client'
 import initializeBuildWatcher from './dev/dev-build-watcher'
 import { displayContent } from './dev/fouc'
-import { getEventSourceWrapper } from './dev/error-overlay/eventsource'
+import { addMessageListener } from './dev/error-overlay/eventsource'
 import * as querystring from '../next-server/lib/router/utils/querystring'
 
 // Temporary workaround for the issue described here:
@@ -25,7 +25,7 @@ const {
 } = window
 
 const prefix = assetPrefix || ''
-const webpackHMR = initWebpackHMR({ assetPrefix: prefix })
+const webpackHMR = initWebpackHMR()
 
 window.next = next
 initNext({ webpackHMR })
@@ -72,7 +72,7 @@ initNext({ webpackHMR })
       }
     }
     devPagesManifestListener.unfiltered = true
-    getEventSourceWrapper({}).addMessageListener(devPagesManifestListener)
+    addMessageListener(devPagesManifestListener)
 
     if (process.env.__NEXT_BUILD_INDICATOR) {
       initializeBuildWatcher((handler) => {