reactjs – iOS Safari hundreds outdated javascript

Drawback

Drawback: Safari on iOS tries to load javascript that already doesn’t exist in HTML, leading to crashed app.

Occurs after publishing any replace (preliminary clear run – works advantageous)

Context

React app, Vite as a bundler.
With out “chunking” the whole lot works advantageous

Steps to breed

Added easy chunking (node_modules -> vendor, the whole lot else -> index):

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

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

Create preliminary construct (lets name it “construct V1”)

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

Open up in iOS – the whole lot works advantageous

Then we make any sort of an replace, rebuild (name it “construct V2”)

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

vendor is identical, index – modified

Now – when iOS Safari hundreds webapp – it fetches all the brand new stuff (HTML modified, new property are loading)

But it surely additionally hundreds previous index.SBYBNO79.js, whereas there is no such thing as a point out of it within the HTML

I would not be bothered by it an excessive amount of, but it surely crashes the app as it’s out of sync with vendor bundle.

Occurs solely on iOS Safari (cell phone)

I attempted to debug it for already 2 weeks, googled the whole lot. Managed to slim it all the way down to this “further” javascript request.

Would admire lots any trace/course.