$page store not correctly updating

[mattpilott]

Describe the bug

When watching for url changes the store seems to stop being reactive after a short while.

For example in my repro, i have a link that appends #modal to the url, i then have a modal component using the page store to watch this change and show some html, initially it works as expected but after opening then closing then opening then closing again that last close stops working.

There are no errors

Reproduction

https://github.com/mattpilott/sveltekit-page-store-issue

Logs

No response

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.57 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.6.0 - /opt/homebrew/bin/node
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.63 
    @sveltejs/kit: next => 1.0.0-next.392 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.2

Severity

serious, but I can work around it

Additional Information

How to repro

1. Clone repo git clone
2. Install deps npm i
3. Run dev server npm run dev
4. Open browser http://localhost:5173
5. Click link Open Modal
6. Click link Close me
7. Click link Open Modal again
8. Click link Close me again
9. Issue will happen modal wont close even though url is updated

[rmunn]

May be related to #4554 which appears to be caused by #3177; see #4554 (comment) for some debugging steps I did on that one which you could reproduce. (Basically, insert another URL change between steps 6 and 7, or between steps 7 and 8, and the behavior will probably change).

I haven't kept up with Svelte-Kit internals recently, so I'm not current on how the URL hash is being handled w/r/t navigations and whether there are plans to change that in the near future. In the meantime, it might be possible to work around this by using something other than the hash to keep track of a modal being opened or not.

[kevinrenskers]

My workaround has been to store the location.hash in its own store.

// /routes/+layout.svelte
<script lang="ts">
  import { browser } from "$app/environment";
  import { fragment } from "$lib/store";

  if (browser) {
    // Store the #hash into a Svelte store for easy access everywhere
    fragment.set(location.hash);
    window.onhashchange = () => {
      fragment.set(location.hash);
    };
  }
</script>

fragment is simply a writable store:

export const fragment: Writable<string | undefined> = writable();