Vite Hot Module Replacement and setInterval

And a workaround if you really need one

Joel Clermont
Joel Clermont
2024-01-10

Out of the box, current Laravel versions are set up with Vite and Hot Module Replacement (HMR) for that extra-speedy development experience.

One thing that might trip you up is that HMR doesn't work automatically with setInterval. If you modify code using setInterval when Vite swaps out that module, you'll get the new code running inside the setInterval block, but the old code will continue to run.

Vite does not maintain an association between setInterval functions and which module started them. So it can't automatically stop the old code from running.

They do provide an API to the HMR logic if you want to handle this yourself, but my recommendation is to keep it simple and just to do a full refresh of the page in the rare circumstances that you're updating code inside a setInterval block.

Here to help,

Joel

P.S. Are you still on Webpack and need some help moving to Vite?

Toss a coin in the jar if you found this helpful.
Want a tip like this in your inbox every weekday? Sign up below 👇🏼

Level up your Laravel skills!

Each 2-minute email has real-world advice you can use.