kit: $layout unexpectedly initialises twice in development

Describe the bug Updating $layout.svelte and reloading the page makes it initialise and mount twice: once on reload and once more on next navigation. This will repeat on every page reload until the dev server is restarted.

To Reproduce

  • Clone and run: https://github.com/intrikate/sveltekit-layout-init-issue.
  • Navigate to localhost:3000, open the console.
  • Update src/routes/$layout.svelte in any way (e.g. delete the empty comment in line 4).
  • Save and reload the page. (HMR on its own does not trigger this behaviour.)
  • Use the links for navigation, count the console statements about the layout lifecycle.

Expected behavior The layout component should mount once and persist between routes, with no unmounts and reinitialisation.

Information about your SvelteKit Installation:

Diagnostics

System: OS: macOS 11.2.3 CPU: (4) x64 Intel® Core™ i5-4288U CPU @ 2.60GHz Memory: 55.59 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.16.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.11 - /usr/local/bin/npm Browsers: Chrome: 90.0.4430.85 Firefox Developer Edition: 89.0 Safari: 14.0.3 npmPackages: @sveltejs/kit: next => 1.0.0-next.89 svelte: ^3.37.0 => 3.37.0 vite: ^2.2.2 => 2.2.2

Severity High, as it leads to obscure lifecycle-related bugs.

Additional Context Complex transitions and per-route layout tweaks are difficult or outright impossible without the layout to coordinate them.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 12
  • Comments: 17 (3 by maintainers)

Most upvoted comments

Shouldn’t be related, no. This one is dev-specific, I’d be surprised to see it in prod. It also shouldn’t cause duplication – excess mounts are evened out by excess unmounts.

If I understand your description correctly, you’re receiving fewer onMount calls than expected. If so, you may be hitting a separate issue.