reactjs – iOS Safari loads outdated javascript

Problem

Problem: Safari on iOS tries to load javascript that already does not exist in HTML, resulting in crashed app.

Happens after publishing any update (initial clean run – works fine)

Context

React app, Vite as a bundler.
Without “chunking” everything works fine

Steps to reproduce

Added simple chunking (node_modules -> vendor, everything else -> index):

const manualChunks = (id: string) => {
    if (id.includes('node_modules')) {
        return 'vendor';
    } else {
        return 'bundle';
    }
};

rollupOptions: {
    output: {
        entryFileNames: 'assets/[name].[hash].js',
        manualChunks,
        chunkFileNames: (chunkInfo) => {
            const hash = createHash('md5')
                .update(Object.values(chunkInfo.moduleIds).join())
                .digest('hex')
                .substr(0, 6);
            return 'assets/[name].' + hash + '.js';
        },
    },
},

Create initial build (lets call it “build V1”)

• dist/assets/index.SBYBNO79.js
• dist/assets/vendor.b1e99d.js

Open up in iOS – everything works fine

Then we make any kind of an update, rebuild (call it “build V2”)

• dist/assets/index.-9z7R_h8.js
• dist/assets/vendor.b1e99d.js

vendor is the same, index – changed

Now – when iOS Safari loads webapp – it fetches all the new stuff (HTML changed, new assets are loading)

But it also loads old index.SBYBNO79.js, while there is no mention of it in the HTML

I wouldn’t be bothered by it too much, but it crashes the app as it is out of sync with vendor bundle.

Happens only on iOS Safari (mobile phone)

I tried to debug it for already 2 weeks, googled everything. Managed to narrow it down to this “extra” javascript request.

Would appreciate a lot any hint/direction.