__layout.svelte may run twice after browser reload in dev

Describe the bug

This issue only affects the context script for src/routes/__layout.svelte. Other layout files are not affected, and #1214 is different.

At first, everything works fine across browser reloads, updating some other files isn’t a problem at all. But updating the top level layout file, or any of it’s imported dependencies (components or modules) will trigger this issue, to cause the context script to run twice when I reload the browser’s tab. Clearing the browser’s cache won’t help until I reload the development server.

Before the update

After the update (notice the abnormal additional log changing positions)

Reproduction

• sveltekit skeleton project: npm init svelte@next __layout-ctx-run-twice
• add the top level layout file containing:

<!-- src/routes/__layout.svelte -->
<script context="module">
    console.log('%c module: this may runs twice.', 'color: purple; font-weight: bold;')

    export function load () {
        console.log('%c load: this runs once.', 'color: magenta; font-weight: bold;')
        return {}
    }
</script>

<script>
    console.log('%c instance: this runs once.', 'color: blue; font-weight: bold;')
</script>

<slot></slot>

• start the development server: npm run dev
• navigate to localhost:3000, all the logs are logged once respecting the same order across reloads, and they’re all coming from __layout.svelte? [sm]
• force update src/routes/__layout.svelte, then reload the browser tab.
• inspect the logs again to notice the first log in code (purple) is logged twice. One is coming from __layout.svelte? [sm] as the other logs, and the abnormal one is coming from __layout.svelte
• reload as much as you like and you’ll notice that the abnormal log may not respect the same log order.
• finally, reload the development server, and the issue will disappear.

Logs

No response

System Info

System:
    OS: Linux 4.19 LMDE 4 (debbie) 4 (debbie)
    CPU: (4) x64 Intel(R) Core(TM) i5-3570K CPU @ 3.40GHz
    Memory: 3.28 GB / 15.56 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.17.1
    npm: 6.14.13
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 68.8.0esr

Severity

annoyance

Additional Information

Tested using both Chrome and Firefox.

[benbesen]

I’ve been struggling with the same issue. Honestly I think it is quite an important bug, which really influences my productivity with Sveltekit as every item or component that gets initialized globally in __layout, is added multiple times. I have this kind of setup in more then 50% of my projects and to really check if the site is working I always need to build it which is quite annoying. If anybody knows a workaround for development i would be very thankful.

[onderbakirtas]

This issue happens to me as well. One of a few issues that makes SvelteKit is not that mature enough (this is stated in docs). Thanks for the comments above that made me understand the problem. Honestly I think this is a deal breaker for v1.0.