First `goto()` call after hot reload and page refresh causes destroy-and-mount and state loss

Describe the bug First goto() call after hot reload and page refresh causes a destroy-and-mount and state loss. This state loss and destroy-and-mount can be annoying when developing and the page has heavy initialisation, like network calls and a slippy map in my case.

Logs

–

To Reproduce

1. Clone https://github.com/rjkip/sveltekit-destroy-and-mount.
2. Run npm run dev.
3. Open http://localhost:3000; it redirects to /0. 🧛 Count Mount! is logged to the console.
4. Click the button a few times; nothing is logged to the console.
5. Cause the page to hot-reload by eg. uncommenting the second ++count;.
6. Refresh the page.
7. Click the button.
8. The page’s state is lost and 🧛 Count Destroy! and 🧛 Count Mount! are logged to the console.

You may to retry a handful of times and play with hot-reloading/refreshing. I reproduced this several times when writing up this bug, but when I tried again before clicking submit the issue wasn’t there…

Expected behavior

1. The button always increments the count on first click without losing state and resetting to 0, and the component stays mounted.

Stacktraces

–

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: Linux 4.19 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 364.20 MB / 12.39 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.22.1 - /usr/bin/node
    npm: 7.10.0 - ~/.npm-prefix/bin/npm
  Browsers:
    Firefox: 88.0.1
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.109
    svelte: ^3.34.0 => 3.38.2
  

• Your browser

  Firefox 88.0 (64-bit)

• Your adapter (e.g. Node, static, Vercel, Begin, etc…)

  Node

Severity Just annoying, really.

Additional context

–

[efreibe]

I have the seme problem, I made a simple example with 3 pages and two buttons.

Initially I navigate to the url http://localhost:3000/site/recibos, the page is loaded I can see my __layout is loaded in the network tab:

Then I click the button that executes the following command:

<button on:click="{() => goto('/site/empresas')}">Empresas</button>

then I see in the network tab that the __layout is loaded again:

After that subsequent links are working as expected:

<button on:click="{() => goto('/site/legajos')}">Legajos</button>

So, after the first click when the __layout is loaded again everything is destroyed and created again, losing the state as @rjkip said.

[kazzkiq]

Good news: Just noticed it only happens on dev server.

I’ve deployed my application with both adapter-static and adapter-node and after build it works as expected (no reloads on first goto() or <a> click).

So it seems like this bug happens only on development, no issues with production builds.