Full reload with HMR + lazy loading

[sarahsporck]

Hello! I'm working on a project where we have used vue router for about half a year now.
A few weeks ago, I rewrote the router to lazy load the routes.
The router contains nested routes and one beforeenter hook.

Now, during the last few weeks, my team found that when changing branches with a running dev server, the routes sometimes behave weirdly. Because after switching the branch, every time I navigate to another route, the browser will reload all chunks in that route. Even if there were no changes. And then the roter will not even route to that packe, but stay on the page you were before. If I then navigate to the route again, everything works fine on that route. But on other routes that have not been visited before on the branch, the same thing occurs.

So, I'm wondering whether this behaviour is normal or expected? I tried retrying the lazy import, which didn't fix the problem.
The only thing that leaves better results if I wrap the lazy routes in an async component. Because then the router will actually navigate to that route after fetching all chunks.

I'd be glad on any insights here. Are there any anti-patterns with vue router, that could lead to this behaviour?

[posva]

It's difficult to tell in a project if this comes from vue router. A lot of things can affect HMR. In UVR, there is a special piece of code that (alongside UVR) handles HMR better: https://uvr.esm.is/guide/hmr.html#hot-module-replacement. It's possible that you need to write a similar piece for your own code

[sarahsporck]

Thank you for the reply ❤️! I finally found the fix for the issue, as you can read from the accepted answer

[sarahsporck]

Today I actually found the fix, which is completely unrelated to vue router.
The issue occurs when there are auto imported global dependencies such as e.g. vuetify, which are not auto discovered automatically during an initial scan (-> https://vite.dev/guide/dep-pre-bundling.html#customizing-the-behavior).
Now, if after adding lazy loading vite always needs to discover these dependencies first, so navigation is not happening -.-.
There are two ways to fix this behavior:
a) include these dependencies to optimized deps (in vite)
b) exclude these dependencies from optimized deps (in vite)

I hope this can help someone else, after hours and days of wonders and search 😅