"Loading failed for the <script>" 404 Error - Svelte

Question

I am having an error with Svelte that prevents the loading of bundle.js, bundle.css, global.css and favicon.png on a website hosted on GitHub pages.

I have read through this question but the issue persists on other browsers, without any VPN, a clean Firefox profile or no extensions, and seems to be an issue with the acceptance of the content-type of the files.

The error message in the Firefox console is:

GET https://path/to/global.css    [HTTP/2 404 Not Found 9ms]

GET  https://path/to/bundle.css   [HTTP/2 404 Not Found 9ms]

GET https://path/to/bundle.js     [HTTP/2 404 Not Found 7ms]

Loading failed for the <script> with source “https://path/to/bundle.js”

GET https://path/to/favicon.png   [HTTP/2 404 Not Found 7ms]

And the Network tab returns:

With the response and request headers for favicon.png:

// Request

GET /favicon.png HTTP/2
Host: kitchefs.github.io
User-Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:81.0) Gecko/20100101 Firefox/81.0
Accept: image/webp,*/*
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://kitchefs.github.io/beta/
TE: Trailers

// Response

HTTP/2 404 Not Found
content-type: text/html; charset=utf-8
server: GitHub.com
strict-transport-security: max-age=31556952
etag: W/"5f4de496-313"
access-control-allow-origin: *
content-encoding: gzip
x-proxy-cache: MISS
x-github-request-id: EAA2:03EC:1BFD04:221937:5F816340
accept-ranges: bytes
date: Sat, 10 Oct 2020 07:39:07 GMT
via: 1.1 varnish
age: 475

The other response headers all show the content-type type of text/html, despite all of them not accepting text/html.

I'm using GitHub pages on a gh-pages branch, and I can confirm that the files exist. I'm wordering if this is an issue with GitHub pages or Svelte and what I can do to fix/prevent this problem from occuring in the future.

If required, here is the code and the website can be accessed at https://kitchefs.github.io/beta.

Answer 1

Remove the leading / in your public/index.html:

<link rel='icon' type='image/png' href='favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='build/bundle.js'></script>

Gh-pages will be resolved with your repos name in the URL. Thus you are not on base path.

https://kitchefs.github.io/beta/

Answer 2

I followed this guide: https://sveltesaas.com/articles/sveltekit-github-pages-guide/

It recommends using the docs folder as build folder (via svelte.config.js) and setting up GitHub Pages to host from the docs folder.

I tried to host from the root folder in GitHub Pages, but just got the 404 error messages. Using the docs folder solved the issue.

Answer 3

I understand that there is already an accepted answer, but the fix didn't help me. What worked for me was this.

Turns out that the problem is that in my svelte.config.js I had paths: { base: dev ? '' : '/my-portfolio', } because it was needed by GitHub in order to make it work. Apparently now it doesn't need it anymore, so all the 404 were right since it was trying to get non-existing files.

https://github.com/orgs/community/discussions/52062

Try removing the paths that you might have configured in svelte.config.js