I am including the vega module in a module:

import vega from '/[email protected]/+esm';

This works without console errors on Chrome, Edge, and Firefox, but not Safari.Inspecting the headers for the above URL, I find:

Link: </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush

Safari treats these as links relative to my site, rather than relative to jsdelivr, and I get a bunch of 404s for these links. I've tried using an importmap to redirect each of these links, but that doesn't work, and even if it did, I don't really want to hardcode all of the versions. I am using a serviceworker for my fetches, so I could try to patch this there, but it seems like a kludge. The modules eventually get loaded, and the site works, I just hate seeing red in the console.

I am including the vega module in a module:

import vega from 'https://cdn.jsdelivr/npm/[email protected]/+esm';

This works without console errors on Chrome, Edge, and Firefox, but not Safari.Inspecting the headers for the above URL, I find:

Link: </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush

Safari treats these as links relative to my site, rather than relative to jsdelivr, and I get a bunch of 404s for these links. I've tried using an importmap to redirect each of these links, but that doesn't work, and even if it did, I don't really want to hardcode all of the versions. I am using a serviceworker for my fetches, so I could try to patch this there, but it seems like a kludge. The modules eventually get loaded, and the site works, I just hate seeing red in the console.

• ecmascript-6
• safari

• I investigated further and disabling the serviceworker allows the preloads to work. Unfortunately, the serviceworker is critical to my app, which makes heavy use of SVG and mp3 assets, which I cache with the serviceworker. What isn't clear to me is whether this is the fault of Safari in how it resolves modulepreloads, or the rollup script that emits relative URLs. Thoughts? – Jeff E Mandel Commented Jan 20 at 17:43

1 Answer 1

This isn't the perfect solution, but it is a workaround. In my serviceworker:

self.addEventListener("fetch", (event) => {
    if (event.request.url.indexOf('/npm/vega') !== -1) { return; }
    event.respondWith(cacheFirst(event.request));
});

This bypasses the serviceworker cacheFirst for that path. Since I don't want to cache the jsdelivr modules with my serviceworker, this is fine, and may be slightly faster, as the serviceworker doesn't need to check the cache for these files. I realized making all matches to '.js' bypass the cache was even better; I don't cache javascript files, and now I can use <link rel="modulepreload"> tags more broadly (until there is a widely available way to have the serviceworker play nicely with modulepreload).

self.addEventListener("fetch", (event) => {
    if (event.request.url.indexOf('.js') !== -1) { return; }
    event.respondWith(cacheFirst(event.request));
});

Of course, modulepreload seems to be a swamp, see Early hints and modulepreload #7854