"TypeError: fetch failed" in production but not preview

[siddharth-narayan]

Describe the bug

I'm getting this error

[500] GET /blog
TypeError: fetch failed
    at node:internal/deps/undici/undici:14900:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async fetch (file:///home/siddharth/projects/personal-site/build/server/index.js:7374:18)

When fetching, but only in a production build. In the preview version it works perfectly.

Here's what my directory tree looks like

[nix-shell:~/projects/personal-site]$ tree -I 'node_modules|build' -L 4
.
├── package.json
├── package-lock.json
├── src
│   ├── app.d.ts
│   ├── app.html
│   ├── lib
│   │   └── index.ts
│   └── routes
│       ├── +layout.svelte
│       ├── +page.svelte
│       └── [...slug]
│           ├── +page.svelte
│           └── +page.ts
├── static
│   ├── build
│   │   ├── blog
│   │   │   └── blog-post.html
│   │   ├── blog.html
│   │   └── index.html
│   └── favicon.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

And importantly, src/routes/[...slug]/+page.ts contains

import { error } from "@sveltejs/kit"


// Uses the correct fetch
export async function load({ fetch, params, url }) {
    let slug = params.slug
    if (!slug) {
        slug = "index"
    }

    // Catch any /build paths not in /static
    if (url.pathname.startsWith("/build")) {
        return error(404)
    }

    let response = await fetch('/build/' + params.slug + '.html')
    if (!response.ok) {
        return
    }

    let html = await response.text()
    return { html: html }
}

My understanding is that the client will always request the page from the server, because I have data-sveltekit-reload set in app.html
Then the server, running load attempts to fetch /build/blog.html and for some reason fails.

Reproduction

The repro can be found at https://github.com/siddharth-narayan/personal-site/tree/repro -- A stripped down version of my project that I feel contains the bare minimum to reproduce. All that's needed should be an npm install and then either npm run build && node build or npm run preview

Logs

System Info

System:
    OS: Linux 6.12 cpe:/o:nixos:nixos:25.11 25.11 (Xantusia)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 23.86 GB / 31.14 GB
    Container: Yes
    Shell: 5.3.3 - /nix/store/35yc81pz0q5yba14lxhn5r3jx5yg6c3l-bash-interactive-5.3p3/bin/bash
  Binaries:
    Node: 22.21.1 - /nix/store/l85fis49agvp5q1ild1rfh4rrgmn92sr-nodejs-22.21.1/bin/node
    npm: 10.9.4 - /nix/store/l85fis49agvp5q1ild1rfh4rrgmn92sr-nodejs-22.21.1/bin/npm
  Browsers:
    Chromium: 142.0.7444.175
    Firefox: 145.0.2
    Firefox Developer Edition: 145.0.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/adapter-node: ^5.0.0 => 5.4.0 
    @sveltejs/kit: ^2.0.0 => 2.48.4 
    @sveltejs/vite-plugin-svelte: ^6.0.0 => 6.2.1 
    svelte: ^5.0.0 => 5.43.6 
    vite: ^7.0.0 => 7.2.2

Severity

serious, but I can work around it -- I can't serve a fully built version of my personal site, I have to serve the preview version

Additional Information

No response

[elliott-with-the-longest-name-on-github]

The reason this is happening is because there's no way (as you've written everything) for SvelteKit / Vite to know you're actually using those assets in static/build, so when you run your build script, they're not getting bundled with your application (and therefore don't "exist" at runtime).

Is there a reason you're trying to use static HTML files like this?

[teemingc]

Here's what's happening:

1. Navigating to /blog invokes the Node adapter's SSR handler because it doesn't match a prerendered page or static asset
2. The SvelteKit server matches the [...slug]/+page.ts route and runs the load function there
3. The load function uses SvelteKit's load function fetch which avoids making a network request by trying to read the static asset from the Vite manifest (assets located in the static folder before building) or finding a matching route
4. It matches /build/blog.html to [...slug]/+page.ts which runs the load function again but returns a 404 because it starts with /build.

For static assets included after build. They can be accessed by directly hitting the Node server which will server the static file at that path instead of invoking the SSR handler (you should use the non-SvelteKit load function fetch to do this). Or by reading directly from the filesystem with fs.

I think this is working as intended because your rest param route is matching /build/blog.html, so SvelteKit would never be able to know that it needs to fallback to a native fetch to retrieve whatever may or may not be at that path.

[siddharth-narayan]

4. It matches /build/blog.html to [...slug]/+page.ts which runs the load function again but returns a 404 because it starts with /build.

I think this part is incorrect? My understanding is that it matches static assets with higher priority than matching a route

I think the more likely explanation is that it's not bundled, in which case I wonder why the response is not a simple 404 but a server side error? Also how can I make the bundler include ALL static assets?

The reason I'm using html like this is because I just want a simple system for blog posts, built with typst. I feel like this should work -- it's probably the most basic way of serving a mostly static webpage with sveltekit I can think of

[teemingc]

4. It matches /build/blog.html to [...slug]/+page.ts which runs the load function again but returns a 404 because it starts with /build.

I think this part is incorrect? My understanding is that it matches static assets with higher priority than matching a route

The order of precedence for client to server is

1. filesystem
2. SSR (matches a page route)

The order of precedence for server to server (which is what the server load function provided fetch does) is:

1. known static assets in the Vite manifest (exists before build)
2. SSR (matches a page route)
3. fallback to native fetch

I think the more likely explanation is that it's not bundled, in which case I wonder why the response is not a simple 404 but a server side error? Also how can I make the bundler include ALL static assets?

To include a static asset in Vite's pipeline, it needs to either be in the /static directory, imported in a js module, or referenced in a CSS file's URL() constructor

[siddharth-narayan]

Right, so given that precedence:

1. filesystem -- Not matched
2. SSR (matches a page route) -- Matched

---

1. known static assets -- Matched?
2. SSR
3. native fetch (what is this one?)

Shouldn't this strategy of serving content work? All the static html files should be included in the build from what you're describing.

[teemingc]

1. known static assets -- Matched?

Only if the files were in the /static folder before the build. Vite needs a way to know about these files to include it in its static asset manifest and it can't do that when it's added after the build. Based on Elliot's reply #15011 (comment) I think those static files generated by typyst are being done after the build? Correct me if I'm wrong.

3. native fetch (what is this one?)

This is equivalent to fetch('https://example.com'). It's just an ordinary fetch without SvelteKit trying to skip the network call. It's similar to the client -> server fetch.

[siddharth-narayan]

No those static files are there before build. There's two build steps -- one to compile typst -> html, and the other to build the site itself. You can see the makefile that I run separately to generate html in /static on the main branch, not the repro branch