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 default s 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.