diff --git a/packages/next/src/client/page-bootstrap.ts b/packages/next/src/client/page-bootstrap.ts
index fd209eaf8a11c..43a44d19ba810 100644
--- a/packages/next/src/client/page-bootstrap.ts
+++ b/packages/next/src/client/page-bootstrap.ts
@@ -17,7 +17,7 @@ export function pageBootrap(assetPrefix: string) {
     let buildIndicatorHandler: (obj: Record<string, any>) => void = () => {}
 
     function devPagesHmrListener(payload: any) {
-      if (payload.action === 'serverError' && payload.errorJSON) {
+      if (payload.action === 'serverError') {
         const { stack, message } = JSON.parse(payload.errorJSON)
         const error = new Error(message)
         error.stack = stack
diff --git a/packages/next/src/server/dev/hot-reloader-types.ts b/packages/next/src/server/dev/hot-reloader-types.ts
index 5f9f3ae3eda3d..18f27a50c4567 100644
--- a/packages/next/src/server/dev/hot-reloader-types.ts
+++ b/packages/next/src/server/dev/hot-reloader-types.ts
@@ -18,6 +18,12 @@ export const enum HMR_ACTIONS_SENT_TO_BROWSER {
   PONG = 'pong',
   DEV_PAGES_MANIFEST_UPDATE = 'devPagesManifestUpdate',
   TURBOPACK_MESSAGE = 'turbopack-message',
+  SERVER_ERROR = 'serverError',
+}
+
+interface ServerErrorAction {
+  action: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ERROR
+  errorJSON: string
 }
 
 interface TurboPackMessageAction {
@@ -96,6 +102,7 @@ export type HMR_ACTION_TYPES =
   | MiddlewareChangesAction
   | ServerOnlyChangesAction
   | DevPagesManifestUpdateAction
+  | ServerErrorAction
 
 export interface NextJsHotReloaderInterface {
   activeWebpackConfigs?: Array<Awaited<ReturnType<typeof getBaseWebpackConfig>>>
diff --git a/packages/next/src/server/dev/hot-reloader-webpack.ts b/packages/next/src/server/dev/hot-reloader-webpack.ts
index df536185baedf..bc413bc153b16 100644
--- a/packages/next/src/server/dev/hot-reloader-webpack.ts
+++ b/packages/next/src/server/dev/hot-reloader-webpack.ts
@@ -1385,6 +1385,7 @@ export default class HotReloader implements NextJsHotReloaderInterface {
     })
 
     this.onDemandEntries = onDemandEntryHandler({
+      hotReloader: this,
       multiCompiler: this.multiCompiler,
       pagesDir: this.pagesDir,
       appDir: this.appDir,
diff --git a/packages/next/src/server/dev/on-demand-entry-handler.ts b/packages/next/src/server/dev/on-demand-entry-handler.ts
index ce32c66e4c730..da7372ac73ae8 100644
--- a/packages/next/src/server/dev/on-demand-entry-handler.ts
+++ b/packages/next/src/server/dev/on-demand-entry-handler.ts
@@ -35,6 +35,8 @@ import {
 } from '../../shared/lib/constants'
 import { RouteMatch } from '../future/route-matches/route-match'
 import { isAppPageRouteMatch } from '../future/route-matches/app-page-route-match'
+import { HMR_ACTIONS_SENT_TO_BROWSER } from './hot-reloader-types'
+import HotReloader from './hot-reloader-webpack'
 
 const debug = origDebug('next:on-demand-entry-handler')
 
@@ -498,6 +500,7 @@ async function findRoutePathData(
 }
 
 export function onDemandEntryHandler({
+  hotReloader,
   maxInactiveAge,
   multiCompiler,
   nextConfig,
@@ -506,6 +509,7 @@ export function onDemandEntryHandler({
   rootDir,
   appDir,
 }: {
+  hotReloader: HotReloader
   maxInactiveAge: number
   multiCompiler: webpack.MultiCompiler
   nextConfig: NextConfigComplete
@@ -947,12 +951,10 @@ export function onDemandEntryHandler({
 
           // New error occurred: buffered error is flushed and new error occurred
           if (!bufferedHmrServerError && error) {
-            client.send(
-              JSON.stringify({
-                action: 'serverError',
-                errorJSON: stringifyError(error),
-              })
-            )
+            hotReloader.send({
+              action: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ERROR,
+              errorJSON: stringifyError(error),
+            })
             bufferedHmrServerError = null
           }