SPA Mode not compatible with PWA

[jdthorpe]

Reproduction

Clone https://github.com/jdthorpe/rr7-framework-pwa-spa-bug and use npm i && npm run build to build the app and notice
that index.html is not included in the list of pre-cached assets in
build/client/sw.js. (You'll want to prettify sw.js to view the list of
pre-cached files which are at the end of the file)

This is because index.html is created after the PWA plugin is run, as evidenced by the build logs:

✓ built in 520ms

PWA v1.0.3
mode      generateSW
precache  7 entries (308.32 KiB)
files generated
  build/client/sw.js
  build/client/workbox-5ffe50d4.js
vite v6.3.5 building SSR bundle for production...
✓ 5 modules transformed.
build/server/registerSW.js                     0.13 kB
build/server/manifest.webmanifest              0.17 kB
build/server/.vite/manifest.json               0.23 kB
build/server/assets/server-build-gxev2nTc.css  7.91 kB
build/server/index.js                          6.03 kB

✓ 1 asset cleaned from React Router server build.
build/server/assets/server-build-gxev2nTc.css

SPA Mode: Generated build/client/index.html
Removing the server build in /Users/jasonthorpe/temp/spa-mode-pwa/build/server due to ssr:false

Thing's I've tried

• Adding the Babel plugin explicitly as suggested by Alem and Pawel in this issue

  This didn't help at all. The index.html asset is still created after the PWA plugin is run. Uncomment the UNCOMMENT TO USE THE BABEL PLUGIN sections in vite.config.ts of the reproduction to build with the babel plugin suggestion to see that this doesn't work.

• Pre-rendering the "/" route as suggested in this issue.

  Uncomment the UNCOMMENT TO PRERENDER THE ROOT ROUTE comment in react-router.config.ts in the reproduction to see that this doesn't work.

  As an aside, my production app has a number of dependencies that are not
  compatible with SSR (such as non ESM modules and external imports from CDNs) and
  adding a pre-rendered route causes the SSR code to be built, which throws errors that
  are not fixable because of the aforementioned dependencies -- and this causes the
  build to fail -- so even it did work it in the repro, it wouldn't be an option for me.

System Info

System:
    OS: macOS 15.6.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 98.97 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.16.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 10.15.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 139.0.7258.155
    Edge: 139.0.3405.125
    Safari: 18.6
  npmPackages:
    @react-router/dev: ^7.7.1 => 7.8.2 
    @react-router/node: ^7.7.1 => 7.8.2 
    @react-router/serve: ^7.7.1 => 7.8.2 
    react-router: ^7.7.1 => 7.8.2 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

SPA Mode should be compatible with vite-plugin-pwa by producing the required assets before vite-plugin-pwa is called

Actual Behavior

the react-router plugin creates the required index.html after vite-plugin-pwa is run, and therefor vite-plugni-pwa has no ability to add index.html to the pre-cache list that is required for offline support.

[timdorr]

This is something on the vite-plugin-pwa side of things. There is an open feature request for this: vite-pwa/vite-plugin-pwa#809