sveltejs / sveltejs/kit

Update for runes dependant on PageData object fired for old component, after navigating with newly loaded data.

Open
#12,851 4 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug

When we have a rune dependent on the PageData object, after navigation it updates for the component that is being unmounted; however, it uses the new PageData object already for the old page. This causes some undefined errors in my case. Tested with $derived and $inspect runes.

Reproduction

I've created simple stackblitz repro repo. It's only two pages with links to each other and load function returning object. For each click on the link we are getting "TypeError: Cannot read properties of undefined".

stackblitz: https://stackblitz.com/edit/sveltejs-kit-template-default-4e5vkn?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=package.json&title=SvelteKit%20Default%20Template

Logs
From my repro repo:

init test
.localservice@runtime.34c588ed.js:26 TypeError: Cannot read properties of undefined (reading 'bar')
    at +page.svelte:4:21
    at chunk-P7K6PZIY.js?v=8436a562:395:15
    at update_reaction (chunk-SPZDVXP4.js?v=8436a562:1677:23)
    at update_effect (chunk-SPZDVXP4.js?v=8436a562:1768:21)
    at internal_set (chunk-SPZDVXP4.js?v=8436a562:2356:13)
    at set (chunk-SPZDVXP4.js?v=8436a562:2327:10)
    at Object.set (chunk-MTDI236X.js?v=8436a562:691:11)
    at Function.assign (<anonymous>)
    at Svelte4Component.__privateGet.$set (chunk-MTDI236X.js?v=8436a562:722:14)
    at Svelte4Component.$set (chunk-MTDI236X.js?v=8436a562:730:35)
console.error @ .localservice@runtime.34c588ed.js:26
(anonymous) @ chunk-P7K6PZIY.js?v=8436a562:397
update_reaction @ chunk-SPZDVXP4.js?v=8436a562:1677
update_effect @ chunk-SPZDVXP4.js?v=8436a562:1768
internal_set @ chunk-SPZDVXP4.js?v=8436a562:2356
set @ chunk-SPZDVXP4.js?v=8436a562:2327
set @ chunk-MTDI236X.js?v=8436a562:691
Svelte4Component.__privateGet.$set @ chunk-MTDI236X.js?v=8436a562:722
$set @ chunk-MTDI236X.js?v=8436a562:730
navigate @ client.js?v=8436a562:1418
await in navigate
(anonymous) @ client.js?v=8436a562:2155
Show 10 more frames
Show lessUnderstand this error
+page.svelte:14 init sub test
.localservice@runtime.34c588ed.js:26 TypeError: Cannot read properties of undefined (reading 'subBar')
    at +page.svelte:4:24
    at chunk-P7K6PZIY.js?v=8436a562:395:15
    at update_reaction (chunk-SPZDVXP4.js?v=8436a562:1677:23)
    at update_effect (chunk-SPZDVXP4.js?v=8436a562:1768:21)
    at internal_set (chunk-SPZDVXP4.js?v=8436a562:2356:13)
    at set (chunk-SPZDVXP4.js?v=8436a562:2327:10)
    at Object.set (chunk-MTDI236X.js?v=8436a562:691:11)
    at Function.assign (<anonymous>)
    at Svelte4Component.__privateGet.$set (chunk-MTDI236X.js?v=8436a562:722:14)
    at Svelte4Component.$set (chunk-MTDI236X.js?v=8436a562:730:35)
console.error @ .localservice@runtime.34c588ed.js:26
(anonymous) @ chunk-P7K6PZIY.js?v=8436a562:397
update_reaction @ chunk-SPZDVXP4.js?v=8436a562:1677
update_effect @ chunk-SPZDVXP4.js?v=8436a562:1768
internal_set @ chunk-SPZDVXP4.js?v=8436a562:2356
set @ chunk-SPZDVXP4.js?v=8436a562:2327
set @ chunk-MTDI236X.js?v=8436a562:691
Svelte4Component.__privateGet.$set @ chunk-MTDI236X.js?v=8436a562:722
$set @ chunk-MTDI236X.js?v=8436a562:730
navigate @ client.js?v=8436a562:1418
await in navigate
(anonymous) @ client.js?v=8436a562:2155
Show 10 more frames
Show lessUnderstand this error
+page.svelte:14 init test
System Info
System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 7.37 GB / 31.95 GB
  Binaries:
    Node: 22.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.10.5 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-auto: ^3.2.5 => 3.2.5
    @sveltejs/kit: ^2.7.2 => 2.7.2
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0
    svelte: ^5.0.4 => 5.0.4
    vite: ^5.4.9 => 5.4.9
Severity

serious, but I can work around it

Additional Information

No response

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

Reproduce the navigation sequence in the linked StackBlitz project, focusing on the two pages, their load data, and the $derived and $inspect runes. Start from the client.js navigation path shown in the stack trace; done means navigating between pages no longer updates the unmounted component with the new PageData or produces the reported undefined-property errors.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.