Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

afterNavigate not firing in dev mode after a code change #4902

Open
johnnysprinkles opened this issue May 13, 2022 · 4 comments
Open

afterNavigate not firing in dev mode after a code change #4902

johnnysprinkles opened this issue May 13, 2022 · 4 comments
Labels
bug Something isn't working vite
Milestone

Comments

@johnnysprinkles
Copy link
Contributor

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:

Screen Shot 2022-05-13 at 10 00 41 AM

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

@Rich-Harris Rich-Harris added the bug Something isn't working label May 13, 2022
@Rich-Harris
Copy link
Member

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.

@Rich-Harris Rich-Harris added this to the whenever milestone May 24, 2022
@johnnysprinkles
Copy link
Contributor Author

Cool, definitely not blocking SvelteKit 1.0 or anything, and really not that big a deal.

@ciscoheat
Copy link

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.

@ciscoheat
Copy link

I don't know why, but suddenly they started to work in dev mode as well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vite
Projects
None yet
Development

No branches or pull requests

3 participants