{"record":{"id":"4ee68ab258adc466","repo":"vercel/next.js","slug":"hmr-invalid-message-json-stringify-message","errorCode":null,"errorMessage":"[HMR] Invalid message: ${JSON.stringify(message)}\\n${(err instanceof Error && err?.stack) || ''}","messagePattern":"\\[HMR\\] Invalid message: (.+?)\\\\n(.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/next/src/client/dev/hot-reloader/shared.ts","lineNumber":18,"sourceCode":"import type { HmrMessageSentToBrowser } from '../../../server/dev/hot-reloader-types'\n\nexport const REACT_REFRESH_FULL_RELOAD =\n  '[Fast Refresh] performing full reload\\n\\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\" +\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' +\n  'Consider migrating the non-React component export to a separate file and importing it into both files.\\n\\n' +\n  'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\\n' +\n  'Fast Refresh requires at least one parent function component in your React tree.'\n\nexport const REACT_REFRESH_FULL_RELOAD_FROM_ERROR =\n  '[Fast Refresh] performing full reload because your application had an unrecoverable error'\n\nexport function reportInvalidHmrMessage(\n  message: HmrMessageSentToBrowser | MessageEvent<unknown>,\n  err: unknown\n) {\n  console.warn(\n    '[HMR] Invalid message: ' +\n      JSON.stringify(message) +\n      '\\n' +\n      ((err instanceof Error && err?.stack) || '')\n  )\n}\n","sourceCodeStart":1,"sourceCodeEnd":25,"githubUrl":"https://github.com/vercel/next.js/blob/0eb377541648e63402a47b38fee00a8d0ce8f8f1/packages/next/src/client/dev/hot-reloader/shared.ts#L1-L25","documentation":"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.","triggerScenarios":"Thrown at packages/next/src/client/dev/hot-reloader/shared.ts:18 when the library encounters an invalid state.","commonSituations":"See trigger scenarios.","solutions":["Ensure client and server run the same Next.js version; mismatched HMR messages cause this error.","Clear .next and restart the dev server."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"0eb377541648e63402a47b38fee00a8d0ce8f8f1","analyzedAt":"2026-08-19T02:10:13.922Z","contentChangedAt":"2026-08-19T02:10:13.922Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}