How to Resolve Browser Cache Invalidation Issue in Vite-React Project Deployment?

[ameeetgaikwad]

Describe the bug

Encountering a persistent issue with my Vite-React project deployment. Whenever I deploy a new version, the changes are not reflected on the production URL. Instead, they only appear after performing a hard reload. This seems to be a cache-related problem.

Details: I have a Vite-React project deployed in a production environment. However, whenever I push updates and redeploy the application, users visiting the site often don't see the latest changes until they perform a hard reload (Ctrl + Shift + R or Cmd + Shift + R). This indicates that there's a caching issue preventing the new version from being fetched and displayed immediately.

Also when the hard reload is done, and after that i again visit the website I again see the old website, the new changes disappears again.

Config:
app.tsx
registerServiceWorker.js
sw.js
vercel.json
vite.config.ts

Reproduction

Steps to reproduce

When u visit the website for the first time and when and update is made to the website you will face the issue from next time you visit the website.

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
    Memory: 5.08 GB / 14.99 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.15.1 - ~/.local/share/pnpm/pnpm
    bun: 1.0.35 - ~/.nvm/versions/node/v18.19.0/bin/bun
  Browsers:
    Brave Browser: 124.1.65.126
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.2.7 => 5.2.10

Used Package Manager

bun

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.

[forrestwilkins]

Has there been any progress with this issue? I also run into this constantly.

Edit: I found some potential workarounds here that didn't end up working for me: https://stackoverflow.com/questions/68046410/how-to-force-vite-clearing-cache-in-vue3

[CodeMode365]

Same issue for me too in my production app with react-vite with npm and i went through the link provided by @forrestwilkins and it didn't work for me. When doing hard refresh my app loads and if i refresh again the app tries to fetch old version of js files

[ameeetgaikwad]

explore service workers, it worked for me