White page in production : the server responded with a MIME type of "text/html"

[emmanuelgeoffray]

I have faced this issue in pre-production: users have a white page and an error in console 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.

I think this issue may take different form, depending on server response.
#457 may be related.

To reproduce:

1. clear the browser cache on the index.88888.js file
   

2. do a commit/push/deploy

3. return to the page

Explanation

What happens in the browser to generate this error:

1. When the url is first loaded, the service worker is installed, and the files served are put in the service worker cache to be available offline: index.html, index.8888.js, *.css, etc.
2. The problem is that the index.8888.js is not actually put in the service worker cache. At the app build, there is a warning.

3. So the index.8888.js file is in the "normal" cache of the browser, which can decide at any time to clean up.
4. The user has not been on the site for a few days and the browser has cleaned up.
5. A new version is deployed, so the hashes change, the index.8888.js file doesn't exist anymore, it is replaced by an index.9999.js file which is correctly imported by the new index.html.
6. The user connects to the site, he still has the old index.html which is in the cache of the service worker. This old index.html imports index.8888.js which does not exist anymore on the server, which will return a 404 or a redirect according to the server configuration, generally in the form of an html page.
7. This triggers a browser error, it does not allow html to be imported in the form of a script, it requires Javascript.

The user ends up with a blank page To fix the problem, the user can do a clear refresh (Ctrl+Shift+R) to load the new index.html which calls index.9999.js which exists on the server.

Solution

To fix this on our side, we need to change the configuration so that index.9999.js and the following are always stored in the service worker cache.

Increase the size of maximumFileSizeToCacheInBytes to 3 MiB so that it allows caching of this file, according to the information in the doc.

Suggestion

This bug can be very painful in production with users facing a 100% broken website.
This bug can be silent when doing tests and QA.
Once it is live, there is no way to fix it. The user is facing a white page and we can't tell him to clear refresh.

For me, I use netlify to build and deploy, and I did not check the warning in the build logs on netlify's website.

I'd suggest that this warning should be changed to an error, this would explicitly stop the build process, requiring developer to fix.

[userquin]

@emmanuelgeoffray

You must deal with this, you have 2 solutions:

• change your build pipeline to keep also on server old assets and remove clear old cached assets from the sw (beware with quota error) or
• keep current behavior and assume the user can do a hard refresh on browser

There is nothing this plugin can do to resolve this issue, the decision is up to you.

EDIT: you can also switch to custom service worker and use NetworkFirst strategy instead using StaleWhileRevalidate strategy.

[userquin]

@emmanuelgeoffray you should check the cache headers you're using, just allow browser use it: https://vite-pwa-org.netlify.app/deployment/#cache-control

[emmanuelgeoffray]

I use the exact netlify.toml config mentioned in the doc https://vite-pwa-org.netlify.app/deployment/netlify.html#basic-deployment-example

[userquin]

@emmanuelgeoffray upps,sorry man, the problem was about maximumFileSizeToCacheInBytes, you should check your app is working properly, on build you should see workbox-build warnings.

[andr-ec]

I'd suggest that this warning should be changed to an error, this would explicitly stop the build process, requiring developer to fix

I'd agree with this change. I saw my users run into the same issue.

[userquin]

@andr-ec we cannot change it, it is workbox internal, I'll check if we can detect it and throw an error if some variable enable (by default will be enabled, will throw if maximumFileSizeToCacheInBytes warning found, and so, anyone can turn off)

[thomastvedt]

I'd suggest that this warning should be changed to an error, this would explicitly stop the build process, requiring developer to fix.

First of all, thank you for your detailed description of what happens here 🙏 I was getting closer to the same conclusion, but this confirms my suspicions.

I'd agree with this change too. If this had thrown an error I would easily catch it and either reduce bundle size or increase the maximumFileSizeToCacheInBytes setting.

This is what the warning looks like in the production build log:

This should at least be a big fat warning box in the vite-pwa documentation. It's not apparent to me that an asset not being preached will result in a "white screen of 404 update issue" in some cases where the browser cache is cleared between updates.

[erfanezk]

i saw this warning but i did nothing for it, i released version and now it's in production,and now i want to release new version , if i release new version i, my users will same the white screen because i face white screen in evaluation , how can i fix this problem and release new version? @emmanuelgeoffray

[edihasaj]

also google cloud run has the same issue if you host it there.

[userquin]

i saw this warning but i did nothing for it, i released version and now it's in production,and now i want to release new version , if i release new version i, my users will same the white screen because i face white screen in evaluation , how can i fix this problem and release new version? @emmanuelgeoffray

You can deploy a new version using a self destroying sw (copy/paste code snippet in the public folder using the current sw name), then change the filename to use another name and build and deploy the new version:

https://vite-pwa-org.netlify.app/guide/unregister-service-worker.html#custom-selfdestroying-service-worker

[userquin]

This should at least be a big fat warning box in the vite-pwa documentation. It's not apparent to me that an asset not being preached will result in a "white screen of 404 update issue" in some cases where the browser cache is cleared between updates.

This is a workbox problem, the plugin is just a wrapper for it, maybe we can detect the warning and throw an error (with some flag to disable this new behavior)

https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest

(You should check your app in your local via build + preview before setting the app to production using multiple builds with changes)

[userquin]

Default new behavior:

Disabling the new behavior: