AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug SandboxBack to Radar

Turbopack HMR WebSocket Closure On First Load Breaks Initial Client-Side Navigation

In Next.js dev with Turbopack, the HMR WebSocket connection is closed before it is established, causing the first client-side navigation after a fresh page load to delay or fall back to a full page reload. After a manual reload, the connection succeeds and navigation works normally.

highConfidence 65%Next.js

Origin Analysis

The Turbopack HMR client sends initialization or ping messages before the WebSocket connection is fully open, causing the browser to close the socket with the error 'WebSocket is closed before the connection is established'. This prevents the client-side router from receiving the HMR ready signal, so the first navigation cannot complete as a client-side transition and instead triggers a full page load.
1. Clone the reproduction repository. 2. Run `npm install`. 3. Start `npm run dev` (default Turbopack). 4. Open the app in a new Chrome tab/private window. 5. Click a navigation link (e.g., `/about` or `/contact`). 6. Observe that the first navigation stalls or falls back to a full page load. 7. Reload the page once; navigation works normally. 8. Verify the issue does not occur with `next dev --webpack` or production build.

Fixing Code Block

Edge Case Audit

The pending message buffer could grow unbounded if the socket never opens (e.g., network failure). Add a maximum buffer size and a retry/backoff strategy. Test across Chrome, Firefox, and Safari; ensure no regression in hot reload updates. If issues arise, roll back this change and investigate server-side Turbopack HMR handshake ordering.

Related Intelligence

highTurbopack CSS HMR serves one-revision-stale output when PostCSS plugins report dependenciesmediumnext/image in dev does not update local image after file edit with same filenamemediumMetadata descriptions with Windows carriage returns cause duplicate <meta> tags during hydrationmediumPages Router hydration causes an extra client render on full page load when any rewrite is configured, including non-rewritten routeshighStructured output fails when appending assistant response as JSON in multi-turn conversationhighcore: _convert_openai_format_to_data_block hard-codes mime_type on base64 file blocks

Ecosystem Topology

Latest critical and high reports

Agent Frameworks

LangChain, LlamaIndex, and Pydantic

LangChainLlamaIndexPydantic
  1. highStructured output fails when appending assistant response as JSON in multi-turn conversation
  2. highcore: _convert_openai_format_to_data_block hard-codes mime_type on base64 file blocks
  3. highMCP Apps UI resources are silently converted to plain text, losing structure and interactivity
  4. highDuplicate tool_calls in content_blocks when using OpenAI Responses API streaming
  5. highcreate_agent with ProviderStrategy binds empty tools list and breaks OpenAI-compatible providers

Toolchains

Next.js, Supabase, and the surrounding app stack

Next.jsSupabase
  1. highTurbopack CSS HMR serves one-revision-stale output when PostCSS plugins report dependencies
  2. highBranching preview migrate step fails on multi-migration gap; --include-all needed
  3. highTurbopack crashes in pages/_app.tsx when next/font is imported
  4. highTurbopack dev on macOS hits Watchpack fs.watch EMFILE on ancestor directories and app subtrees
  5. highAuth: invite and recovery links create a persistent authenticated session before password is set