admin管理员组文章数量:1319477
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.
Share Improve this question asked Jan 19 at 20:38 Jeff E MandelJeff E Mandel 812 silver badges8 bronze badges 1- 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
Reset to default 0This 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
本文标签: ecmascript 6Safari modulepreload for relative paths failsStack Overflow
版权声明:本文标题:ecmascript 6 - Safari modulepreload for relative paths fails - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742059542a2418496.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论