SvelteKit, import type LayoutServerLoad/PageLoad

Question

In layout.server.ts I try to

import type { LayoutServerLoad } from './$types';

but the type can't be found:

'"./$types"' has no exported member named 'LayoutServerLoad'. Did you mean 'LayoutServerData'?

What do I need to do to get the type LayoutServerLoad (or PageLoad or PageServerLoad ...) in ./$types?

You don't need to import these types any more if you're using VS Code with the latest version of the Svelte for VS Code extension installed (or one of other specific set-ups mentioned on the page linked to), and in fact removing them is what fixed this problem for me. svelte.dev/blog/… — wkille
– wkille, Commented Nov 22, 2023 at 20:39

brunnerh · Accepted Answer · 2024-11-30 17:49:33Z

47

The file has to be called +layout.server.ts (or for another load action, one of the other fixed names, see docs)
The Vite dev server has to be running, which watches the files and generates the types when a file is changed. (You can also execute svelte-kit sync to generate those files.)
(The tsconfig.json has to extend .svelte-kit\tsconfig.json, which defines rootDirs, so the generated types are resolved. This should already be the case, judging by the suggestion for LayoutServerData.)

edited Nov 30, 2024 at 17:49

answered Oct 13, 2022 at 18:54

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gichamba Over a year ago

The Vite dev server has to be running is the part I was missing. Thanks!

monsto Over a year ago

This is a great reminder to actually start your dev server first.

A. Rabus Over a year ago

I think the dev server creates some files on startup, so it needs to be run only once after each relevant change.

a s Dec 23, 2024 at 2:19

First "npx svelte-check" if you see errors, "npx svelte-kit sync"

Maxime Curon · Accepted Answer · 2023-04-04 15:40:42Z

4

For me, just an "npm update" worked.

answered Apr 4, 2023 at 15:40

Maxime Curon

412 bronze badges

2 Comments

Lokoba Over a year ago

Looks like more suitable for a comment

Maxime Curon Over a year ago

Indeed sorry for the mistake

Rio Rifaldi · Accepted Answer · 2024-08-24 04:36:55Z

2

in my case typescript complaining on +page.ts when i import

import type { PageLoad } from './$types';

and then i try run

pnpm update
pnpm check

after that type Cmd + shift + P > restart TS server or developers: Reload window (visual studio code)

by the way if you facing typescript complaining and unsure about it, you can run step above. it's worked for me as long i coded with typescript

answered Aug 24, 2024 at 4:36

Rio Rifaldi

811 silver badge6 bronze badges

Collectives™ on Stack Overflow

SvelteKit, import type LayoutServerLoad/PageLoad

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related