Static site deployment with pre-rendered slug-based routing getting a 500 internal error

[ali-mir]

Describe the bug

I have a project to build a personal website with a blog component. The blog logic reads a markdown file, parses it into HTML, and displays it. The blog routing is slug-based, and I deployed to GitHub pages on ali-mir.com via adapter-static. When loading the blog, I keep hitting a 500 Internal Error.

I'm a complete beginner to SvelteKit and webapps in general, but from what I've read you can't prerender dynamic routes. The solution was to specify the entries in the +page.server.ts file to allow the dynamic route to be rendered. I've done this, but I'm still hitting the same 500 internal error on my deployed site. Strangely, if i refresh the page, the blog content will appear. Does anyone know what I'm doing wrong? Thanks in advance!

(my apologies if this bug is related to some mistake I'm making, and not some issue in the SvelteKit core!)

Reproduction

https://github.com/ali-mir/ali-mir.github.io/blob/master/src/routes/blog/%5Bslug%5D/%2Bpage.server.ts?rgh-link-date=2023-10-25T17%3A41%3A37Z#L11-L16

If you go to ali-mir.com and click on "blog" and then "hello world", you will see the 500 internal error.

Logs

app.9c4190f0.js:1 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
handleError @ app.9c4190f0.js:1
...
/blog/hello-world/__data.json?x-sveltekit-invalidated=01:1     Failed to load resource: the server responded with a status of 404 ()

System Info

System:
    OS: macOS 13.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.21 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.0.0 - /opt/homebrew/bin/node
    npm: 10.2.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 118.0.5993.88
    Safari: 17.0
  npmPackages:
    @sveltejs/adapter-static: ^2.0.3 => 2.0.3
    @sveltejs/kit: ^1.25.2 => 1.25.2
    svelte: ^4.2.1 => 4.2.1
    vite: ^4.4.11 => 4.4.11

Severity

annoyance

Additional Information

I asked a similar question on StacKOverflow (before I found the entries field in the configuration).

[eltigerchino]

Hi Ali, have you tried redeploying your site? I've tried to reproduce this locally and wasn't able to. You will need to ensure the build/blog/hello-world/__data.json file exists in the build output and can be accessed from your domain.

The reason the page fails to load is because https://ali-mir.com/blog/hello-world/__data.json returns a 404 where the file should exist. When navigating from the home page to the blog post, we are using client-side routing (CSR). In doing so, we fetch the __data.json file and update the page with the data from that file, all without refreshing the page. SvelteKit expects this JSON file, but receives the 404 HTML page instead. This causes the 500 internal server error because SvelteKit fails to render the page.

In contrast, it works when you refresh the page because we are not requesting the __data.json file, but rather, the https://ali-mir.com/blog/hello-world/index.html file (which exists).

[ali-mir]

Hi @s3812497, thanks for the answer! I've redeployed my site a few times and it's always resulted in the internal error. I also tried moving the entries into the svelte.config.js file with the full path (/blog/hello-world), but still had the same issue.

It works for my locally, but it's just the deployed site on GitHub Pages that results in this error (which makes it hard to test locally). I've confirmed that the __data.json file exists in the gh-pages branch of my repo. And makes sense about why it's failing — I wonder if it's some weird path related thing where GitHub Pages is looking in the wrong place for my __data.json file.

[ali-mir]

Could it have anything to do with the fact that I'm using a custom URL? My project path is ali-mir.github.io, but my deployed site is ali-mir.com (just thinking out loud here)

[ali-mir]

I just tested by removing the custom URL and CNAME from my repo (so the link was just ali-mir.github.io) and I still hit the internal error, so I don't think it has to the do with the URL

[eltigerchino]

Hi @ali-mir , I've setup a basic github pages deployment and I'm able to access my files that start with an _.
https://github.com/eltigerchino/eltigerchino.github.io
https://eltigerchino.github.io/_app/version.json
https://eltigerchino.github.io/blog/hello-world/__data.json

I see that you have added a static/.nojekyll file and renamed _app to app. I suggest trying to revert those changes and see if that helps. I have a feeling that your current site is unable to serve files that start with _.

[ali-mir]

Hmm, interesting — I've removed nojekyll and removed the line that set _app to app. This seems to solve my issue with the 500 internal error, but what's interesting is now my website can't find my TailwindCSS stylesheet:

ali-mir.com

[ali-mir]

Seems like this is the same issue as this one.

[ali-mir]

I've added back the .nojekyll to static directory and deployed, and it looks like the same state: no CSS or styles, but the internal error on the blog page is gone

[eltigerchino]

It looks like all the files in your _app directory are not being served. The CSS file for example can’t be accessed
https://ali-mir.com/_app/immutable/assets/app.7cc02a5b.css