Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

$layout unexpectedly initialises twice in development

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Reactions:12
Comments:17 (3 by maintainers)

Top GitHub Comments

1reaction

intrikatecommented, May 11, 2021

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.

0reactions

benmccanncommented, Oct 13, 2021

Closing as duplicate of https://github.com/sveltejs/kit/issues/2130

Top Results From Across the Web

React Components rendered twice — any way to fix this?

It only happens in development mode and should help to find accidental side effects in the render phase. Let's find out if there...

How to stop Flask from initialising twice in Debug Mode?

The simplest thing to do here would be to add use_reloader=False to your call to app.run - that is: app.run(debug=True, use_reloader=False).

5 Common Hibernate Mistakes That Cause Dozens of ...

5 Common Hibernate Mistakes That Cause Dozens of Unexpected Queries ; 1 1. Not Initializing Lazily Fetched Associations. 1.1 Initialize all Required Associations....

Design-time errors in the Windows Forms Designer

This is an internal error in the Visual Studio serializer. It indicates that the serializer has tried to name an object twice, which...

Known issues with Android Studio and Android Gradle Plugin

To fix this issue, upgrade your Android 11 emulator to version 9 or higher by navigating to Tools > SDK Manager. In the...