[HMR] Invalid message: [object Object] TypeError: Cannot read properties of null (reading 'message')

[masenf]

Describe the bug
Hot reload doesn't update the client anymore...

To Reproduce

docker run -it -p 3000:3000 -p 8000:8000 python:3.11 bash
apt-get update && apt-get install -y vim git
pip install git+https://github.com/reflex-dev/reflex@main
mkdir foo
cd foo
reflex init --template blank
reflex run &

Open https://localhost:3000 in a browser

vim foo/foo.py

Make any change, save file, switch back to browser.

Note that the compiling bar appears in the terminal, the vercel/nextjs loading icon appears in the browser, but the page is not updated. In the browser console the following traceback is seen:

HMR] Invalid message: [object Object]
TypeError: Cannot read properties of null (reading 'message')
    at formatMessage (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/format-webpack-messages.js:46:48)
    at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/format-webpack-messages.js:129:16)
    at Array.map (<anonymous>)
    at formatWebpackMessages (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/format-webpack-messages.js:128:45)
    at printWarnings (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:105:62)
    at handleWarnings (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:120:5)
    at processMessage (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:223:28)
    at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:55:13)
    at WebSocket.handleMessage (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/websocket.js:52:17)

Specifics (please complete the following information):

• Python Version: 3.11
• Reflex Version: main (5e738fd)
• OS: linux (docker)

Additional context
Appears to be solved by #3992 which bumps the nextjs version to 14.2.13

[masenf]

the culprit here appears to be bca49d3 #3732

When i revert that patch, then the problem goes away.

I was able to identify the issue by looking at the messages of webpack-hmr

Good reflex-0.6.0 next-14.0.1
{"action":"built","hash":"b99d0b9f93b334d7","warnings":[],"errors":[]}
{"event":"client-success","clientId":1727243302918}
{"event":"client-hmr-latency","id":1727243302918,"startTime":1727243318295,"endTime":1727243319441,"page":"/","updatedModules":["./utils/context.js","./components/reflex/radix_themes_color_mode_provider.js","./utils/state.js","./pages/_app.js","./pages/index.js"],"isPageHidden":false}

Bad reflex-main (with CSR) next-14.0.1
{"action":"built","hash":"77ba73562d65afce","warnings":[null],"errors":[]}
{"event":"client-warning","warningCount":1,"clientId":1727242421878}

Good reflex-main (with CSR) next-14.2.13
{"action":"built","hash":"1221cdb5768c7826","warnings":[],"errors":[]}
{"event":"client-success","clientId":1727243042567}
{"event":"client-hmr-latency","id":1727243042567,"startTime":1727243068359,"endTime":1727243069818,"page":"/","updatedModules":[],"isPageHidden":false}

The error stack from the browser console stems from this "warnings":[null],.

Poking around I determined that commenting out the following line in utils/state.js makes the problem go away:

import * as Babel from "@babel/standalone";

[adhami3310]

Fixed by #3992 merging.