Streamline HMR message handling (#83336)

unstubbable · web-flow · commit abfc98ff542c · 2025-09-02T15:23:44.000+02:00
For unknown reasons, 3 of the 17 different HMR messages used an `event` property instead of `action`, leading to an unnecessarily convoluted handling of the HMR messages, where the `in` operator had to be used.

&gt; [!TIP]
&gt; Best reviewed with hidden whitespace changes.
diff --git a/packages/next/src/client/dev/amp-dev.ts b/packages/next/src/client/dev/amp-dev.ts
@@ -77,10 +77,6 @@ async function tryApplyUpdates() {
 }
 
 addMessageListener((message) => {
-  if (!('action' in message)) {
-    return
-  }
-
   try {
     // actions which are not related to amp-dev
     if (
diff --git a/packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx b/packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx
@@ -202,10 +202,6 @@ export function processMessage(
   processTurbopackMessage: (msg: TurbopackMsgToBrowser) => void,
   staticIndicatorState: StaticIndicatorState
 ) {
-  if (!('action' in obj)) {
-    return
-  }
-
   function handleErrors(errors: ReadonlyArray<unknown>) {
     // "Massage" webpack messages.
     const formatted = formatWebpackMessages({
@@ -452,6 +448,11 @@ export function processMessage(
       dispatcher.onDevToolsConfig(obj.data)
       return
     }
+    case HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES:
+    case HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES:
+    case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES:
+      // These action types are handled in src/client/page-bootstrap.ts
+      break
     default: {
       obj satisfies never
     }
diff --git a/packages/next/src/client/dev/hot-reloader/pages/hot-reloader-pages.ts b/packages/next/src/client/dev/hot-reloader/pages/hot-reloader-pages.ts
@@ -74,10 +74,6 @@ export default function connect() {
   register()
 
   addMessageListener((payload) => {
-    if (!('action' in payload)) {
-      return
-    }
-
     try {
       processMessage(payload)
     } catch (err: unknown) {
@@ -253,10 +249,6 @@ export function handleStaticIndicator() {
 
 /** Handles messages from the server for the Pages Router. */
 function processMessage(obj: HMR_ACTION_TYPES) {
-  if (!('action' in obj)) {
-    return
-  }
-
   switch (obj.action) {
     case HMR_ACTIONS_SENT_TO_BROWSER.ISR_MANIFEST: {
       isrManifest = obj.data
@@ -374,6 +366,11 @@ function processMessage(obj: HMR_ACTION_TYPES) {
     case HMR_ACTIONS_SENT_TO_BROWSER.DEVTOOLS_CONFIG:
       dispatcher.onDevToolsConfig(obj.data)
       break
+    case HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES:
+    case HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES:
+    case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES:
+      // These action types are handled in src/client/page-bootstrap.ts
+      break
     default:
       obj satisfies never
   }
diff --git a/packages/next/src/client/dev/hot-reloader/pages/websocket.ts b/packages/next/src/client/dev/hot-reloader/pages/websocket.ts
@@ -49,10 +49,7 @@ export function connectHMR(options: { path: string; assetPrefix: string }) {
       // Coerce into HMR_ACTION_TYPES as that is the format.
       const msg: HMR_ACTION_TYPES = JSON.parse(event.data)
 
-      if (
-        'action' in msg &&
-        msg.action === HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_CONNECTED
-      ) {
+      if (msg.action === HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_CONNECTED) {
         if (
           serverSessionId !== null &&
           serverSessionId !== msg.data.sessionId
diff --git a/packages/next/src/client/page-bootstrap.ts b/packages/next/src/client/page-bootstrap.ts
@@ -26,111 +26,106 @@ export function pageBootstrap(assetPrefix: string) {
 
     addMessageListener((payload) => {
       if (reloading) return
-      if ('action' in payload) {
-        switch (payload.action) {
-          case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ERROR: {
-            const { stack, message } = JSON.parse(payload.errorJSON)
-            const error = new Error(message)
-            error.stack = stack
-            throw error
-          }
-          case HMR_ACTIONS_SENT_TO_BROWSER.RELOAD_PAGE: {
-            reloading = true
-            window.location.reload()
-            break
-          }
-          case HMR_ACTIONS_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE: {
-            fetch(
-              `${assetPrefix}/_next/static/development/_devPagesManifest.json`
-            )
-              .then((res) => res.json())
-              .then((manifest) => {
-                window.__DEV_PAGES_MANIFEST = manifest
-              })
-              .catch((err) => {
-                console.log(`Failed to fetch devPagesManifest`, err)
-              })
-            break
-          }
-          case HMR_ACTIONS_SENT_TO_BROWSER.ADDED_PAGE:
-          case HMR_ACTIONS_SENT_TO_BROWSER.REMOVED_PAGE:
-          case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_COMPONENT_CHANGES:
-          case HMR_ACTIONS_SENT_TO_BROWSER.SYNC:
-          case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:
-          case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING:
-          case HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_MESSAGE:
-          case HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_CONNECTED:
-          case HMR_ACTIONS_SENT_TO_BROWSER.ISR_MANIFEST:
-          case HMR_ACTIONS_SENT_TO_BROWSER.DEVTOOLS_CONFIG:
-            // Most of these action types are handled in
-            // src/client/dev/hot-reloader/pages/hot-reloader-pages.ts
-            break
-          default:
-            payload satisfies never
+
+      switch (payload.action) {
+        case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ERROR: {
+          const { stack, message } = JSON.parse(payload.errorJSON)
+          const error = new Error(message)
+          error.stack = stack
+          throw error
         }
-      } else if ('event' in payload) {
-        switch (payload.event) {
-          case HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES: {
-            return window.location.reload()
-          }
-          case HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES: {
-            // This is used in `../server/dev/turbopack-utils.ts`.
-            const isOnErrorPage = window.next.router.pathname === '/_error'
-            // On the error page we want to reload the page when a page was changed
-            if (isOnErrorPage) {
-              if (RuntimeErrorHandler.hadRuntimeError) {
-                console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR)
-              }
-              reloading = true
-              performFullReload(null)
-            }
-            break
-          }
-          case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES: {
+        case HMR_ACTIONS_SENT_TO_BROWSER.RELOAD_PAGE: {
+          reloading = true
+          window.location.reload()
+          break
+        }
+        case HMR_ACTIONS_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE: {
+          fetch(
+            `${assetPrefix}/_next/static/development/_devPagesManifest.json`
+          )
+            .then((res) => res.json())
+            .then((manifest) => {
+              window.__DEV_PAGES_MANIFEST = manifest
+            })
+            .catch((err) => {
+              console.log(`Failed to fetch devPagesManifest`, err)
+            })
+          break
+        }
+        case HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES: {
+          return window.location.reload()
+        }
+        case HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES: {
+          // This is used in `../server/dev/turbopack-utils.ts`.
+          const isOnErrorPage = window.next.router.pathname === '/_error'
+          // On the error page we want to reload the page when a page was changed
+          if (isOnErrorPage) {
             if (RuntimeErrorHandler.hadRuntimeError) {
               console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR)
-              performFullReload(null)
             }
+            reloading = true
+            performFullReload(null)
+          }
+          break
+        }
+        case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES: {
+          if (RuntimeErrorHandler.hadRuntimeError) {
+            console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR)
+            performFullReload(null)
+          }
 
-            const { pages } = payload
+          const { pages } = payload
 
-            // Make sure to reload when the dev-overlay is showing for an
-            // API route
-            // TODO: Fix `__NEXT_PAGE` type
-            if (pages.includes(router.query.__NEXT_PAGE as string)) {
-              return window.location.reload()
-            }
+          // Make sure to reload when the dev-overlay is showing for an
+          // API route
+          // TODO: Fix `__NEXT_PAGE` type
+          if (pages.includes(router.query.__NEXT_PAGE as string)) {
+            return window.location.reload()
+          }
 
-            if (!router.clc && pages.includes(router.pathname)) {
-              console.log('Refreshing page data due to server-side change')
-              dispatcher.buildingIndicatorShow()
-              const clearIndicator = dispatcher.buildingIndicatorHide
+          if (!router.clc && pages.includes(router.pathname)) {
+            console.log('Refreshing page data due to server-side change')
+            dispatcher.buildingIndicatorShow()
+            const clearIndicator = dispatcher.buildingIndicatorHide
 
-              router
-                .replace(
-                  router.pathname +
-                    '?' +
-                    String(
-                      assign(
-                        urlQueryToSearchParams(router.query),
-                        new URLSearchParams(location.search)
-                      )
-                    ),
-                  router.asPath,
-                  { scroll: false }
-                )
-                .catch(() => {
-                  // trigger hard reload when failing to refresh data
-                  // to show error overlay properly
-                  location.reload()
-                })
-                .finally(clearIndicator)
-            }
-            break
+            router
+              .replace(
+                router.pathname +
+                  '?' +
+                  String(
+                    assign(
+                      urlQueryToSearchParams(router.query),
+                      new URLSearchParams(location.search)
+                    )
+                  ),
+                router.asPath,
+                { scroll: false }
+              )
+              .catch(() => {
+                // trigger hard reload when failing to refresh data
+                // to show error overlay properly
+                location.reload()
+              })
+              .finally(clearIndicator)
           }
-          default:
-            payload satisfies never
+          break
         }
+        case HMR_ACTIONS_SENT_TO_BROWSER.ADDED_PAGE:
+        case HMR_ACTIONS_SENT_TO_BROWSER.REMOVED_PAGE:
+        case HMR_ACTIONS_SENT_TO_BROWSER.SERVER_COMPONENT_CHANGES:
+        case HMR_ACTIONS_SENT_TO_BROWSER.SYNC:
+        case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:
+        case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING:
+        case HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_MESSAGE:
+        case HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_CONNECTED:
+        case HMR_ACTIONS_SENT_TO_BROWSER.ISR_MANIFEST:
+        case HMR_ACTIONS_SENT_TO_BROWSER.DEVTOOLS_CONFIG:
+          // Most of these action types are handled in
+          // src/client/dev/hot-reloader/pages/hot-reloader-pages.ts and
+          // src/client/dev/hot-reloader/app/hot-reloader-app.tsx
+          break
+        default:
+          payload satisfies never
       }
     })
   })
diff --git a/packages/next/src/server/dev/hot-reloader-types.ts b/packages/next/src/server/dev/hot-reloader-types.ts
@@ -91,15 +91,15 @@ interface ServerComponentChangesAction {
 }
 
 interface MiddlewareChangesAction {
-  event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES
+  action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES
 }
 
 interface ClientChangesAction {
-  event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES
+  action: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES
 }
 
 interface ServerOnlyChangesAction {
-  event: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES
+  action: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES
   pages: ReadonlyArray<string>
 }
 
diff --git a/packages/next/src/server/dev/hot-reloader-webpack.ts b/packages/next/src/server/dev/hot-reloader-webpack.ts
@@ -1466,13 +1466,13 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
 
       if (middlewareChanges.length > 0) {
         this.send({
-          event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
+          action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
         })
       }
 
       if (pageChanges.length > 0) {
         this.send({
-          event: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES,
+          action: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES,
           pages: serverOnlyChanges.map((pg) =>
             denormalizePagePath(pg.slice('pages'.length))
           ),
diff --git a/packages/next/src/server/dev/turbopack-utils.ts b/packages/next/src/server/dev/turbopack-utils.ts
@@ -266,7 +266,7 @@ export async function handleRouteType({
               // Report the next compilation again
               readyIds?.delete(pathname)
               return {
-                event: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES,
+                action: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES,
                 pages: [page],
               }
             },
@@ -283,7 +283,7 @@ export async function handleRouteType({
             route.htmlEndpoint,
             () => {
               return {
-                event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES,
+                action: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES,
               }
             },
             (e) => {
@@ -650,12 +650,12 @@ export async function handleEntrypoints({
     await dev?.hooks.unsubscribeFromChanges(key)
     currentEntryIssues.delete(key)
     dev.hooks.sendHmr('middleware', {
-      event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
+      action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
     })
   } else if (!currentEntrypoints.global.middleware && middleware) {
     // Went from no middleware to middleware
     dev.hooks.sendHmr('middleware', {
-      event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
+      action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
     })
   }
 
@@ -763,11 +763,13 @@ export async function handleEntrypoints({
           })
 
           finishBuilding?.()
-          return { event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES }
+          return {
+            action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
+          }
         },
         () => {
           return {
-            event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
+            action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES,
           }
         }
       )
@@ -879,7 +881,9 @@ export async function handlePagesErrorRoute({
       () => {
         // There's a special case for this in `../client/page-bootstrap.ts`.
         // https://github.com/vercel/next.js/blob/08d7a7e5189a835f5dcb82af026174e587575c0e/packages/next/src/client/page-bootstrap.ts#L69-L71
-        return { event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES }
+        return {
+          action: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES,
+        }
       },
       () => {
         return {
@@ -932,7 +936,9 @@ export async function handlePagesErrorRoute({
       () => {
         // There's a special case for this in `../client/page-bootstrap.ts`.
         // https://github.com/vercel/next.js/blob/08d7a7e5189a835f5dcb82af026174e587575c0e/packages/next/src/client/page-bootstrap.ts#L69-L71
-        return { event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES }
+        return {
+          action: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES,
+        }
       },
       (e) => {
         return {

Original file line number	Diff line number	Diff line change
`@@ -91,15 +91,15 @@ interface ServerComponentChangesAction {`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`interface MiddlewareChangesAction {`
`94`		`- event: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES`
	`94`	`+ action: HMR_ACTIONS_SENT_TO_BROWSER.MIDDLEWARE_CHANGES`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`interface ClientChangesAction {`
`98`		`- event: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES`
	`98`	`+ action: HMR_ACTIONS_SENT_TO_BROWSER.CLIENT_CHANGES`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`interface ServerOnlyChangesAction {`
`102`		`- event: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES`
	`102`	`+ action: HMR_ACTIONS_SENT_TO_BROWSER.SERVER_ONLY_CHANGES`
`103`	`103`	`pages: ReadonlyArray<string>`
`104`	`104`	`}`
`105`	`105`