Use of runes in SvelteKit load functions
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
It doesn't seem like there's a way to use the svelte runes within the +page.ts, +layout.ts, +page.server.ts and +layout.server.ts, and it doesn't seem like there's any documentation. This seem like a major limiting factor in implementing reactivity using the new methods. Attempting to do so gives the following error:
Svelte error: rune_outside_svelte
The '$state' rune is only available inside '.svelte' and '.svelte.js/ts' files
Attempting to rename the load files to something like +page.svelte.ts gives the following error:
Files prefixed with + are reserved (saw /+page.svelte.ts)
Reproduction
import type { PageLoad } from './$types';
export const load: PageLoad = () => {
let x = $state(None)
return {
x
};
};
Logs
No response
System Info
System:
OS: macOS 15.2
CPU: (12) arm64 Apple M3 Pro
Memory: 1.20 GB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 23.4.0 - ~/web/node_modules/.bin/node
npm: 10.9.0 - /opt/homebrew/bin/npm
Browsers:
Safari: 18.2
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.3.1
@sveltejs/kit: ^2.0.0 => 2.8.2
@sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.1
svelte: ^5.0.0 => 5.2.7
vite: ^5.0.3 => 5.4.11
Severity
annoyance
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduced example in +page.ts, then compare the behavior across +layout.ts, +page.server.ts, and +layout.server.ts. Check the SvelteKit load-function and rune behavior for these entry points; done means establishing whether runes are supported there and documenting or addressing the observed error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100