My Browser (Chrome, Firefox, Edge) is not showing the hmr updates of my react app.
My cli output and my browser console output show that the file was changed.
However the Browser doesn't show the update.
After refreshing the page update is displayed.
#CLI
[vite] hmr update /assets/pages/start.tsx
#Browser console
[vite] hot updated: /assets/pages/start.tsx
I am using Ubuntu Linux 22.04.
I have a docker environment with PHP8.2 and NodeJS (using yarn).
I installed Symfony 6.2 via composer and the pentatrion/vite-bundle.
On Root-Level I have an 'assets' folder with my React Application files.
Docker maps the ports 80, 443, 3000 and 5173 to the same ports on host.
The server section of my vite.config.js looks like this:
server: {
host: true,
hmr: {
host: 'localhost',
}
},
I have tried various configs with usePolling, different ports, path: '/socket.io', ... without success.
For HMR to even be recognized I had to setup react_refresh.js and add it as an entrypoint before my app.
#react_refresh.js
import RefreshRuntime from "react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
Has anyone experienced similar issues with the browser not displaying the file updates served via HMR?
EDIT: Any change of the included CSS file is being displayed immediately