Global slug overrides prerendered route when accessed from another route with event.fetch, but ok from client?

[x0rsw1tch]

Describe the bug

I have a web app that has a mix of prerendered pages and dynamic pages. The app also contains a REST endpoint that has export const prerender = true. The prerendered endpoint fetches data from a CMS, containing a bunch of metadata needed for a another endpoint that depends on. This fetch is done at build time, as the metadata itself doesn't change very often (but often enough that it can't be a static file), so we slapped the prerender flag on it.

Basic layout:

src/routes/[...slug]          Pages from the CMS
src/routes/api/route1         Component endpoint to get some data. Depends on route2.json
src/routes/api/route2.json    Prerendered metadata from the CMS

route1 requests data from route2.json and does stuff with it. All of this works great in dev mode, but it stops working in preview mode and also when deployed to the host. route2.json actually works fine when accessing thru the browser; however, it does not work when using event.fetch() from within route1. Instead it returns the HTML from our 404 page. route2.json also works without the prerender, but that means it needs to fetch the data from the CMS at runtime, which is what we're trying to avoid.

I have made a repo to demonstrate the problem: https://github.com/x0rsw1tch/sk-route-prerender-test. Reproduction steps included.

Reproduction

Using minimal reproduction repo

1. Clone my repo
2. Run npm i && npm run dev
3. Access http://localhost:5173/
4. Browser output: Result: {"something":true,"somethingElse":true} (working as intended here)
5. Shutdown dev
6. Run npm run build && npm run preview
7. Access http://localhost:4173/
8. Browser output: Result: {"something":true} (not working as intended here)

Manually

1. Create a new SvelteKit app
2. Create a route for /api/route2.json that is prerender = true that outputs some JSON
3. Create a route for /api/route1 that outputs some JSON,
4. Have /api/route use event.fetch to retrieve data from /api/route2.json, and merge the JSON objects
5. Create a new route at root named [...slug] with param file containing:

export const match = (param) => {
  return /^[a-z0-9-]+$/.test(param);
};

6. Under [...slug]/+page.svelte Do a fetch at onMount fetching /api/route1 . Output the response to body to see what comes back from the fetch.

---

Expected result:

Output from /api/route1 has output from itself and from /api/route2.json in dev mode and preview mode.

Actual results:

• Output from /api/route1 has output from itself and from /api/route2.json in dev mode, but preview mode throws an error.
• If /api/route2.json is accessed from the client, the output is correct, it's only incorrect when accessing the endpoint using event.fetch. Error is thrown (see logs). When doing event.fetch('/api/route2.json'), it's not routing correctly, instead it's fetching from the "slug" endpoint returning HTML, not JSON.

Logs

Node logs:


SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
    at successSteps (node:internal/deps/undici/undici:5300:27)
    at fullyReadBody (node:internal/deps/undici/undici:1447:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
    at async GET (file:///D:/Projects-Ethode/sk-predender-test/.svelte-kit/output/server/entries/endpoints/api/route1/_server.js:8:3)
    at async render_endpoint (file:///D:/Projects-Ethode/sk-predender-test/.svelte-kit/output/server/index.js:260:20)
    at async resolve2 (file:///D:/Projects-Ethode/sk-predender-test/.svelte-kit/output/server/index.js:2802:22)
    at async respond (file:///D:/Projects-Ethode/sk-predender-test/.svelte-kit/output/server/index.js:2697:22)

### System Info

```Shell
System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen 9 7900X 12-Core Processor
    Memory: 25.10 GB / 63.18 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.5 
    @sveltejs/adapter-vercel: ^5.1.0 => 5.4.4 
    @sveltejs/kit: ^2.0.0 => 2.5.28 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.2
    svelte: ^4.2.12 => 4.2.19
    vite: ^5.0.3 => 5.4.6

Severity

serious, but I can work around it

Additional Information

No response

[eltigerchino]

All of this works great in dev mode, but it stops working in preview mode and also when deployed to the host.

Note that prerendering doesn't occur until build time so during development the behaviour is inaccurate.

I suspect the catch-all route is incorrectly taking precedence over the static files.

EDIT: after building, the prerendered files are missing from the server manifest so they aren't being fetched when given a relative URL on the server-side. Additionally, the catch-all route is taking precedence here, so the request never falls through to the prerendered endpoint.

As a workaround for now. You should exclude the /api routes from the catch all. For example:

// params/slug.js
export const match = (param) => {
  return !param.startsWith('/api') || /^[a-z0-9-]+$/.test(param);
};

[x0rsw1tch]

All of this works great in dev mode, but it stops working in preview mode and also when deployed to the host.

Note that prerendering doesn't occur until build time so during development the behaviour is inaccurate.

I suspect the catch-all route is incorrectly taking precedence over the static files.

EDIT: the prerendered files are missing from the server manifest so they aren't being fetched when given a relative URL on the server-side. Additionally, the catch-all route is taking precedence here, so the request never falls through to the prerendered endpoint.

As a workaround for now. You should exclude the /api routes from the catch all. For example:

// params/slug.js
export const match = (param) => {
  return !param.startsWith('/api') || /^[a-z0-9-]+$/.test(param);
};

Yup, that workaround did the trick for us, thank you!