Vite is my latest love affair with front-end development tools.

One of the things that's kept me from diving into front end work is the elaborate build tool setup that goes with it. Rather than building and shipping stuff, I end up spending a lot of time setting up and troubleshooting the tools to get me going.

Vite seems to offer an answer. However, after the first initial positive experience with it, the Hot Module Reloading (HMR) functionality stopped working for no good reason. Instead, the page would reload every time, causing loss of state during updates.

Here's the fix you need to add to your project in your vite.config.js file.

vite.config.js

How to fix Vite Hot Module Reloading (HMR)