When omitting $types, the type assigned to page load differs from PageLoad

Open
#12,483 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Reproduce the mismatch using src/app.d.ts and src/routes/+page.ts, then run npm run check with and without the PageLoad annotation. Compare the inferred return type with the explicit PageLoad behavior; done means both forms consistently report the missing required PageData property or otherwise follow the documented typing contract.

Written by the indexing model from the issue text.

Description

types / typescript
Describe the bug

When omitting $types from +page.ts, the return type of the load doesn't seem to be checked correctly. When typed as PageLoad, required properties in PageData which aren't present in the return type cause a type error. If the types are omitted (as described in the blog post), the type error no longer occurs.

Reproduction
  1. Run npm create svelte@latest repro && cd repro && npm install (select "Skeleton project", "Yes, using TypeScript syntax", and no additions).

  2. Run npm run check — no errors or warnings, yet.

  3. Edit src/app.d.ts; uncomment PageData and give it the properties { foo: string; bar: string; }.

  4. Create src/routes/+page.ts with the contents:

    import type { PageLoad } from './$types';
    
    export const load: PageLoad = () => {
      return { foo: "exists" };
    };
    
  5. Run npm run check again — this time, there's a type error saying that "Property 'bar' is missing …" (shown in full in the "Logs" section).

  6. Edit src/routes/+page.ts, removing the import and type annotation.

  7. Run npm run check one more time — the type error is no longer reported.

(The same behavior can be seen when using VS Code instead of running svelte-check directly.)

Logs
> omit-types-repro@0.0.1 check /home/five35/Documents/tmp/omit-types-repro
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /home/five35/Documents/tmp/omit-types-repro
Getting Svelte diagnostics...

/home/five35/Documents/tmp/omit-types-repro/src/routes/+page.ts:3:14
Error: Type '() => { foo: string; }' is not assignable to type 'PageLoad'.
  Type '{ foo: string; }' is not assignable to type 'MaybePromise<Omit<PageData, never> & Partial<Pick<PageData, never>> & Record<string, any>>'.
    Type '{ foo: string; }' is not assignable to type 'Omit<PageData, never> & Partial<Pick<PageData, never>> & Record<string, any>'.
      Property 'bar' is missing in type '{ foo: string; }' but required in type 'Omit<PageData, never>'. 

export const load: PageLoad = () => {
  return { foo: "exists" };


====================================
svelte-check found 1 error and 0 warnings in 1 file
 ELIFECYCLE  Command failed with exit code 1.
System Info
System:
    OS: Linux 6.8 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
    CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
    Memory: 2.64 GB / 7.63 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.13.1 - ~/.local/share/asdf/installs/nodejs/20.13.1/bin/node
    Yarn: 1.22.22 - ~/.local/share/asdf/installs/nodejs/20.13.1/bin/yarn
    npm: 10.5.2 - ~/.local/share/asdf/plugins/nodejs/shims/npm
    pnpm: 9.5.0 - ~/.local/share/asdf/installs/nodejs/20.13.1/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.2 
    @sveltejs/kit: ^2.0.0 => 2.5.18 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.1 
    svelte: ^4.2.7 => 4.2.18 
    vite: ^5.0.3 => 5.3.4
Severity

serious, but I can work around it

Additional Information

I'm new to Svelte and SvelteKit, so it's possible this is user error or expected behavior, but I wasn't able to find anything in the documentation or the blog article which indicates that the type of load should be anything other than PageLoad. (In fact, export const load: PageLoad = … is used in an example on the types page.)

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

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.

More from sveltejs/kit

All issues in sveltejs/kit

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.