vercel/next.js · error

[HMR] Invalid message: ${JSON.stringify(message)}\n${(err in

Error message

[HMR] Invalid message: ${JSON.stringify(message)}\n${(err instanceof Error && err?.stack) || ''}

What it means

reportInvalidHmrMessage is invoked from the browser HMR client's message handling when a message from the dev server fails validation/parsing; it logs the raw message (JSON.stringify) plus the error stack so server/client message-schema mismatches are diagnosable.

Source

Thrown at packages/next/src/client/dev/hot-reloader/shared.ts:18

import type { HmrMessageSentToBrowser } from '../../../server/dev/hot-reloader-types'

export const REACT_REFRESH_FULL_RELOAD =
  '[Fast Refresh] performing full reload\n\n' +
  "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" +
  'You might have a file which exports a React component but also exports a value that is imported by a non-React component file.\n' +
  'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' +
  'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' +
  'Fast Refresh requires at least one parent function component in your React tree.'

export const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =
  '[Fast Refresh] performing full reload because your application had an unrecoverable error'

export function reportInvalidHmrMessage(
  message: HmrMessageSentToBrowser | MessageEvent<unknown>,
  err: unknown
) {
  console.warn(
    '[HMR] Invalid message: ' +
      JSON.stringify(message) +
      '\n' +
      ((err instanceof Error && err?.stack) || '')
  )
}

View on GitHub (pinned to 0eb3775416)

Solutions

  1. Ensure client and server run the same Next.js version; mismatched HMR messages cause this error.
  2. Clear .next and restart the dev server.
Defensive patterns

Strategy: try-catch

When it happens

Trigger: Thrown at packages/next/src/client/dev/hot-reloader/shared.ts:18 when the library encounters an invalid state.

Common situations: See trigger scenarios.


AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/4ee68ab258adc466. Report an issue: GitHub.