sveltejs / sveltejs/kit

Undefined slug in data load function

Open
#14,599 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

router
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

When you use trailingSlash = 'always', and routes including slugs like /src/routes/hi/[slug]/+page.svelte, Svelte will render files like build/hi/brian-gradin/index.html, where brian-gradin is the slug linked to from somewhere on the site.

However, if you include index.html in the URL when you load a page, Svelte will not pass the slug correctly into the data load function in /src/routes/hi/[slug]/+page.ts. Instead, the slug will be undefined, resulting in failure for any code that relies on the slug and doesn't specifically address this case.

Note if you indirectly reference index.html (for example with a url like /hi/brian-gradin/), the slug will be passed in correctly to the data load function.

This is especially problematic because Google appears to index its search such that search links will contain index.html in the URL regardless of the links on the actual site pages, which means if the site code doesn't handle this issue, Google will link to a page that crashes during hydration.

It seems like regardless of what trailingSlash is set to, Svelte should always be able to pass the correct slug into the data load function.

Reproduction

https://github.com/bgradin/svelte-data-load-error

Logs
TypeError: can't access property "split", t.slug is undefined
    Immutable 2
        u
        Oe
app.Ltbb7Soe.js:2:6870
    Immutable 3
System Info
Apple M3 Pro, Sequoia 15.5, Firefox 143.0.3
Severity

annoyance

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction and compare loading the slug route through a URL ending in index.html with the equivalent trailing-slash URL. Trace the data load function in /src/routes/hi/[slug]/+page.ts and determine where the slug becomes undefined. Done means both URL forms pass the correct slug and no longer fail during hydration.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.