Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
x0rsw1tch opened this issue Sep 30, 2024 · 0 comments

Comments

@x0rsw1tch
Copy link

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);
};
  1. 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

@x0rsw1tch x0rsw1tch changed the title Global slug overrides prerendered route when accessed from another route doesn't work with Global slug overrides prerendered route when accessed from another route, but ok directly Sep 30, 2024
@x0rsw1tch x0rsw1tch changed the title Global slug overrides prerendered route when accessed from another route, but ok directly Global slug overrides prerendered route when accessed from another route with event.fetch, but ok from client? Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant