nuxt: Auto reload page when chunk assets are not found

I hope to raise the priority of this function, For any enterprise adopting nuxt in the production environment, they does not want to see a page with all styles lost when the user opens the browser for the first time after each new deployment. Thanks @pi0

I keep old hashes on the CDN living for some time, but use a custom Nuxt module that detects app update and shows a notification suggesting to reload the page.

I have been using this approach for years (even since pre-bridge Nuxt 2) privately. Today I published the module as a reusable npm package: nuxt-update. Hope someone finds it useful, too. ✌️

The label is a triaging system for bugs, so all enhancements are marked as p2. That doesn’t reflect where an issue falls on our roadmap.

Ok thank you for the clarification. 😃 On a side note, I’ve really loved working with nuxt3 and despite this major issue I’m running into, I’ve found it a joy to develop with.

It will be good to have information on which NuxtLink was clicked and then redirect to this URL when error occurs.

I’m so glad this has come up again! I didn’t realize it had been mentioned before because I’ve actually just discovered this issue and it has caused a huge pain for me and my users. Getting some eyes on this issue would be hugely appreciated 🙏

Hey, any news on this or perhaps a temporary workaround? Vercel in particular is annoying as they seemingly don’t store old chunks at all which results in them being interpreted as function calls…

I used the solution by @shiva-prasad-reddy and it works. Thanks a lot! I hope Nuxt 3 will soon handle this out of the box, because now the default behavior is that Nuxt apps can easily end up in an unrecoverable crashed state without any feedback to the user.

Hey guys, for my use case the following solution is working, hoping for a better and offical way to do this sooner.

const router = useRouter();
router.onError((error) => {
  const messages = [
    "Importing a module script failed", // safari
    "Failed to fetch dynamically imported module", // edge & chrome
  ];
  if (messages.some((message) => error?.message.includes(message))) {
    (async () => {
      // show some notification to the user if you want too.
      // add some delay so that user can read the message in notification.
      router.go(0);
    })();
  }
});