AI & Agent Dev Bug Sandbox Back to Radar

Turbopack HMR Stops Updating After Client Navigation

In Next.js dev with Turbopack, editing a file after client-side navigation does not trigger hot module replacement until a manual page reload. The HMR subscription for the new route is not registered after client navigation.

mediumConfidence 70%Next.js Affected V16.4.0-Canary.31 Affected V16.3.5

Origin Analysis

Turbopack's page-specific HMR subscription is registered on initial full page load but is not re-established after client-side navigation. The client router does not send a subscription message for the new pathname, leaving the previously active page's subscription in place and preventing updates to the newly navigated page.

1. Clone https://github.com/g-wn/next-hmr-repro/ and install dependencies 2. Run next dev 3. Open http://127.0.0.1:3000 4. Click 'Page B' 5. Edit app/b/label.js and save 6. Observe that the heading does not update without a manual reload

Fixing Code Block

--- a/packages/next/src/client/components/react-dev-overlay/internal/helpers/use-websocket.ts
+++ b/packages/next/src/client/components/react-dev-overlay/internal/helpers/use-websocket.ts
@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
 
 export function useWebsocket(protocol: string) {
   const socketRef = useRef<WebSocket>()
+  const pathname = usePathname()
   const pathnameRef = useRef(pathname)
   pathnameRef.current = pathname
 
@@ -14,6 +15,15 @@ export function useWebsocket(protocol: string) {
     return () => socket.close()
   }, [protocol])
 
+  // Re-subscribe to HMR for the current route after client-side navigation
+  useEffect(() => {
+    const socket = socketRef.current
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: 'subscribe', path: pathname }))
+    }
+  }, [pathname])
+
   return socketRef
 }

The patch adds the current pathname from next/navigation and sends an explicit subscription message over the dev websocket whenever the pathname changes. This ensures that after client-side navigation, the Turbopack HMR server is informed of the new active route and can push updates for the corresponding module graph.

Edge Case Audit

This change may cause duplicate subscriptions if the websocket message also contains other route-specific initialization, potentially leading to duplicate logs or minor performance overhead. It assumes the dev websocket protocol uses a 'subscribe' message with a 'path' field, which is consistent with Turbopack's dev server but should be verified against the actual server implementation. If the websocket server does not support this message type, an error could occur; test in a development environment before applying. Rollback: revert this patch if unexpected websocket errors appear or if HMR behavior becomes erratic.