Some file types in a minted project aren't served correctly: SVG, OBJ

[odbol]

I'm trying to reference SVG files from CSS in my project zip. The SVG files are included in a directory called "images". But when I reference them from the CSS like this:

.muted .muteButton {
    background-image: url('images/baseline-volume_off-24px.svg');
}

the request fails to load the image during previewing the project, giving a 404 error. This works for other types of images like PNGs and JPGs so it seems like its some specific problem with the server not recognizing the SVG filetype/mime type or something?

The same happens for .OBJ 3d files: if you try to load them using three.js ObjectLoader, you get a 404 error. I think there is some special configuration you need to do for node servers to get .OBJ mime types to be recognized and served correctly...

[apitaru]

Same issue for me with SVGs. Would be great if this could be prioritized as SVGs (vs PNG) can future-proof work as screen resolution increases. Thanks.

[ciphrd]

Can you provide an IPFS link to a project impacted by this issue ?

[odbol]

I haven't been able to submit a project yet because of the bug, but here it is in preview (not sure if you are able to view my preview links): https://www.fxhash.xyz/sandbox/preview.html?id=484063&fxhash=ooezXRbbTicM1LBLUU6MGMXtt36k6oUjTWgJiHC7YtCvXAhKoZW

[odbol]

project.zip Here's the project zip if that helps.

[apitaru]

I'm in the same situation. Here's one more project for testing if helpful, a minimal SVG-loader https://github.com/apitaru/test-project-svg-fxhash-sandbox

And thank you x10000 for taking time to look at this

[gianko]

@odbol changes your css to:

.muted .muteButton {
    background-image: url('./images/baseline-volume_off-24px.svg');
}

and it should work, just tested it

[odbol]

@gianko did that work in the Preview? It's still giving me 404 even with the dot in the URL. (I don't see how that would make a difference... the browser requests the same resource either way, at least in Chrome).

worker.js:7 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at worker.js:7
(anonymous) @ worker.js:7
75fbcfb0-d78e-470e-9862-8e0dd6385643:1 GET https://www.fxhash.xyz/sandbox/images/baseline-volume_off-24px.svg 404
worker.js:7 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at worker.js:7
(anonymous) @ worker.js:7
75fbcfb0-d78e-470e-9862-8e0dd6385643:1 GET https://www.fxhash.xyz/sandbox/images/baseline-volume_up-24px.svg 404

[odbol]

Do the "TypeError: Failed to construct 'URL': Invalid URL" errors mean anything here?

[odbol]

So I've narrowed it down to this code in worker.js:

self.addEventListener("fetch", async (event) => {
  // get an ID from the request referrer url
  const url = new URL(event.request.referrer)

the event.request.referrer is an empty string for any URLs referenced in the CSS file, for some reason. All the other fetches have a proper referrer. Not sure why that is, but I will investigate further...

[jon-lehman]

I believe this may still be an issue. I have been running into this issue myself while trying to test a Sveltekit build (I know, sveltekit is not the ideal tool but it's just what I enjoy using). Specifically, I am running into the same error that odbol mentioned in the sandbox:

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
at worker.js:7:15

Line 7 from worker.js referenced in the error:

const url = new URL(event.request.referrer)

In order to create a minimal reproduction of this issue I did the following:

1. Created another clean/base Sveltekit project using the official installation (explained in the sveltekit docs)
2. Installed and configured the static adapter for sveltekit
3. Added the fxhash snippet to the of app.html
4. Ran a build (which is attached)
5. Tested on fxhash sandbox and still receive the same error.

That test build doesn't even have CSS or use any styling that I can tell. sveltekit-static-build.zip

---

For now I am thinking about switching over to normal Svelte since I don't really need the routing. Hopefully that will solve my issue.