How to handle outdated lazy loaded routes chunk name changes when routing

[demyte]

Hi all,

When lazy loading chunks, in a spa, if the route has not yet been navigated to and server side a new build gets deployed, the chunk name that will be routed to no longer exists on the server, so there is a 404?

e.g.

• User loads spa and performs some work
• New build is deployed which updates the /help chunk
• User navigatres to /help which wants to load somethign like /help-sfw32as.js
• User gets 4040 because, after the build, server side the chunk is called /help-ad34ddf.js

Is there an inbuilt way to handle this?

Or

Am I able to hook some code into catching this error and manually work out what the new chunk should be via some hand crafted method (e.g. load the latest manifest.json from the server and ask it for the new file: for the given compoenent trying to be loaded > src/pages/help.vue

Hopefully I have just missed something simple :)

Thanks in advanced 👍

[posva]

Hello! This is because fo chunks names, it's at the bundler level. With Vue Router, you can hook into the router.onError(): vitejs/vite#11804 (comment)

This allows you to reload the page so the browser fetches the new js assets

[demyte]

@posva Thanks for pointing me that way.

Like others in that thread I need to be more surgical and only reload the asset chunk for the route that is being navigated to as re-loading the whole page will interrupt a users flow and as we may have many deployments per day it could get annoying for users.

Maybe I'll have to implement a service worker to manage this so that on new deployment detection it goes and updates assets it doesnt already know about.

I don't really want to go down the full PWA route if I don't have to tho.

[posva]

Yes, you will have to implement something custom until something native is implemented by bundlers