Wrong route gets served

[maiertech]

Description

When running UniMe in dev on macOS, occasionally, it looks like SvelteKit serves the wrong route. This can happen in different routes.

Hardware Specification

Happens in development on macOS.

Steps to Reproduce the Bug

This bug was observed by @daniel-mader and @maiertech. Both have not managed to find a reproduction.

Expected Behaviour

In the animated GIF I am on route /welcome/password and click on the continue button. I expect to be taken to route /welcome/password/confirm.

Actual Behaviour

When I am on route /welcome/password I click on the continue button and unexpectedly see route /welcome/pledge:

Errors

No errors in the logs.

[maiertech]

When I log SvelteKit's navigating store and then click on the continue button on route /welcome/password, I see the following object:

{
  complete: Promise {status: "fulfilled", result: undefined},
  from: {params: {}, route: {id: "/welcome/password"}, url: URL},
  to: {params: {}, route: {id: "/welcome/password/confirm"}, url: URL},
  type: "goto",
  willUnload: false
}

This is the correct object, i.e. SvelteKit does not navigate to /welcome/pledge. When I output $page.url.pathname in the root layout, I see /welcome/password/confirm when SvelteKit is done navigating, but with the content of /welcome/pledge.

This makes me believe that this is some esoteric Safari caching problem.

The workaround is to disable caches in the Network tab in Safari's DevTools:

[maiertech]

For now, wait and see if we can reproduce this in the future.

[maiertech]

This is another instance of a wrong route getting served in dev. The app routes from the password confirmation screen back to the password confirmation screen. This is not because the passwords don't match. After the second password confirmation attempt, the Continue button freezes.

Console

There are no logs in the console that give a hint on what is going wrong.

$navigating store

When on route /welcome/password/confirm for the first time and when clicking Continue (after validation passes), the navigating store looks like this:

{
  complete: Promise {status: "pending"},
  from: {params: {}, route: {id: "/welcome/password/confirm"}, url: URL},
  to: {params: {}, route: {id: "/welcome/password/completed"}, url: URL},
  type: "goto",
  willUnload: false
}

Again, SvelteKit navigates to the correct route, but the wrong UI is visible. The second time, navigating looks like this

{
  complete: Promise {status: "fulfilled", result: undefined},
  from: {params: {}, route: {id: "/welcome/password/completed"}, url: URL},
  to: {params: {}, route: {id: "/welcome/password/completed"}, url: URL},
  type: "goto",
  willUnload: false
}

This is correct given what UI is shown, but makes no sense.

As a workaround, disable the cache as described in a comment further up.