[Question] How to handle "Failed to load module" errors with `prompt`

[javisperez]

Hello,

I've implemented this amazing plugin in my app with a prompt message but sometimes instead of a prompt an error is thrown complaining about a module that failed to load (a ChunkLoadError for what I understand):

What is the most graceful way to handle this? I could catch the error and hard reload the page but I want to see if maybe I am missing a step on my implementation?

Thank you.

[javisperez]

Just for more context; instead of a prompt or autoUpdate what I'm trying to do (which I had with vue-cli-pwa) is to register a SW and once a new SW is activated, check for needsRefresh and only refresh after the next route resolve, like this:

// main.js
import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
   onNeedRefresh () {
     document.dispatchEvent(
       new CustomEvent('newAppVersionInstalled', {
         reload: () => {
           updateSW(true)
         }
       })
     )
   }
})

// routes/index.js

let newAppVersionInstalled = false

document.addEventListener('newAppVersionInstalled', () => {
  console.log('New SW installed, the page will refresh after the next route change.')
  newAppVersionInstalled = true
})

router.afterEach(() => {
  if (newAppVersionInstalled) {
    window.location.reload()
  }
})

That's just a draft but the idea overall, but the issue is that that work as long as I don't try to navigate to a route that is cached after the cache was cleared, because it will return a 404.

Ideas or help please?

[n1203]

I have the same problem as you, when the application updates, the page will be because the javascript module is wrong content caused by white screen

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

My guess is that it has to do with router, since the HTML content is accessing a non-existent route