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.