kit
kit copied to clipboard
sveltejs
afterNavigate not firing in dev mode after a code change
Describe the bug
In dev mode, after I make a code change, the route component re-mounts itself but it never re-calls afterNavigate. This leaves things in an inconsistent state. Not a huge annoyance but I do have to do ctrl+R in development.
Reproduction
Repro is this branch of this repo: https://github.com/johnnysprinkles/sveltekit_after_navigate_bug/tree/after_nv
It's the Demo app from create-svelte, but extended to have a parameterized route. The final commit in the history just adds some console.log statements to see what's going on in the lifecycle events.
To repro just clone that and run it with "npm run dev", and create some TODO items, then navigate to one of them (using the newly added "i" icon, or directly via URL e.g. http://localhost:3000/todos/4110e0d9-56a9-4106-9d83-1fada5087660
Now if you make an arbitrary change to routes/todos/[uid].svelte you'll see how onMount runs but afterNavigate doesn't. Looks like:
Logs
No response
System Info
System:
OS: macOS 11.6
CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
Memory: 510.79 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.4.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 101.0.4951.64
Firefox: 100.0
Safari: 14.1.2
Safari Technology Preview: 15.4
npmPackages:
@sveltejs/adapter-auto: next => 1.0.0-next.33
@sveltejs/kit: next => 1.0.0-next.302
svelte: ^3.46.0 => 3.46.4
Severity
annoyance
Additional Information
No response
This one is tricky — since the component accepts the hot update, the main client.js has no opportunity to detect that that's happened and re-run afterNavigate functions that were added during the update. (The Vite client does emit events, but not the ones we need AFAICT.)
We can't just run afterNavigate functions as soon as they're registered, because that would incorrectly cause functions to run when a component was rendered outside a navigation.
I don't have any bright ideas for fixing this, but maybe someone with more Vite expertise would.
Cool, definitely not blocking SvelteKit 1.0 or anything, and really not that big a deal.
I ran into this issue as well, when trying to use before/afterNavigate to modify the session, containing a flash message that's displayed somewhere on the page after a POST, but should be cleared when navigating elsewhere.
