Vite React TypeScript monorepo hot module reloading (HMR) not working

Question

I have a Vite/React/Typescript/Yarn monorepo that contains two applications and some shared components. I'm having trouble getting HMR working when running vite dev.

The example repo is here: https://github.com/jakeboone02/em-hmr-test. If you run yarn && yarn start:app1, open http://localhost:3012/, then edit any of the components and save, the page will reload instead of just replacing the component in place.

The repo is a stripped down version of the actual proprietary code. I tried converting all the exports to defaults as suggested in this discussion question answer, but the page still reloads on every change.

Is there something wrong with the Vite config that is preventing HMR from working?

Answer 1

Turns out I was using the deprecated @vitejs/plugin-react-refresh instead of the newer, shinier @vitejs/plugin-react. Repo has been updated.

Answer 2

For me i found out after a bunch of struggle that it was someone’s bad class init call not wrapped in a singleton pattern in our stack, so not Vite or HMR but HMR reinitiating something that shouldn’t be reinitiatable so it errored out. By wrapping it in a singleton pattern it stopped pausing the second hot module reload. So pay very close attention to your browser console warnings and local server logs on this one before chasing random confit stuff with vite, it’s possibly not vite at all