Search code examples
github-pagessvelte

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

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: network tab

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.

Solution

  • 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/