5.4.3 production bug

[georgemincof]

Describe the bug

Hi!

We encountered an issue with version 5.4.3 that breaks our app in production:

• fix(preload): add crossorigin attribute in CSS link tags (fix(preload): add crossorigin attribute in CSS link tags #17930) (15871c7), closes fix(preload): add crossorigin attribute in CSS link tags #17930

This change affects users who already have the CSS resources cached. By adding the crossorigin attribute, the browser automatically cancels the requests due to CORS.

For some reason, the failed preload is causing the entire app to break.

For now, I’ve locked the version to 5.4.2 until I find a solution.

Reproduction

Steps to reproduce

No response

System Info

-

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[georgemincof]

A solution to force cache invalidation is to change the CSS asset file name using the following options:

• build.rollupOptions
• output.assetFileNames

For example, notice the 0 added after the [hash]:

build: {
  rollupOptions: {
    output: {
      assetFileNames: (chunkInfo) => {
        // https://github.com/vitejs/vite/issues/18038
        if (chunkInfo.name?.endsWith(".css")) {
          return "assets/[name]-[hash]0[extname]";
        }

        return "assets/[name]-[hash][extname]";
      },
    },
  },
},

[seanogdev]

We also encountered this issue this morning. Thankfully, downgrading to 5.4.2 fixed this for us also 👍

[sapphi-red]

@georgemincof @seanogdev Would you try 5.4.5+? A related fix has been included.

[peroo]

@sapphi-red We ran into a production outage yesterday after updating from vite 5.2.8 to 5.4.6, because of this change in behavior. Users who had dynamically imported css chunks cached would crash with Unable to preload CSS.

From what I can tell the fix in 5.4.5 only applies to vite:preloadError, which doesn't really help us since reloading the page won't make a difference as long as the chunk has the same URI, which is the case for us.

We'll probably have to invalidate the cache by temporarily changing the css chunk filename as suggested above.

[georgemincof]

Right... the real problem here is the "crossorigin" attribute. The issue that preload brings is more of a side effect.
Any app using a CDN in production with static content rules will face this breaking change due to CORS.

In conclusion, I believe this can be closed, as the fix that worked for us should address the issue for the majority. It's not that big of a problem...

[seanogdev]

Its not a big problem no 👍 It is just a bit cumbersome to have to modify the asset hash function in vite due to a patch version, a lot of our css files dont change that often so this vite config change will need to stay for the foreseeable.

[wcpaez]

I had production outage after updating from vite 5.3.5 to 5.4.7.

[sapphi-red]

Hmm, does it only happen on Chromium browsers (e.g. Chrome, Edge)? It feels like it's similar to https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome (https://issues.chromium.org/issues/40381978).

[phthhieu]

We also have production outage after updating from vite 5.3.3 to 5.4.8.

[smartin88]

We also experience this issue when upgrading to the latest version of Nuxt, which uses Vite 5.4.6. Downgrading to 5.4.2 worked, but now there is a reported security vulnerability. I have tried the workaround from @georgemincof but this causes all of our CSS assets not to load at all.

[sapphi-red]

Published v5.4.10 that changes all hashes of CSS files. It should be fine to upgrade now that the hashes are different from the older deployed ones.