Unrecoverable HMR error in <+layout>: next update will trigger a full reload

[sserdyuk]

Describe the bug

The application breaks on HMR update. The following message is presented in the console: Unrecoverable HMR error in <+layout>: next update will trigger a full reload

Stack:

chunk-I3KZ4WQP.js?v=ce2bc517:2133 Uncaught (in promise) 
TypeError: Cannot read properties of undefined (reading '$$')
    at init (chunk-I3KZ4WQP.js?v=ce2bc517:2133:46)
    at new Layout (+layout.svelte:24:42)
    at createProxiedComponent (svelte-hooks.js?v=ce2bc517:341:9)
    at new ProxyComponent (proxy.js?v=ce2bc517:242:7)
    at new Proxy<+layout> (proxy.js?v=ce2bc517:349:11)
    at construct_svelte_component_dev (chunk-I3KZ4WQP.js?v=d2d889bf:2569:22)
    at Array.create_if_block_2 (root.svelte:47:81)
    at create_fragment (root.svelte:45:20)
    at init (chunk-I3KZ4WQP.js?v=d2d889bf:2148:35)
    at new Root (root.svelte:23:25)
init	@	chunk-I3KZ4WQP.js?v=ce2bc517:2133
Layout	@	+layout.svelte:24
createProxiedComponent	@	svelte-hooks.js?v=ce2bc517:341
ProxyComponent	@	proxy.js?v=ce2bc517:242
Proxy<+layout>	@	proxy.js?v=ce2bc517:349
construct_svelte_component_dev	@	chunk-I3KZ4WQP.js?v=d2d889bf:2569
create_if_block_2	@	root.svelte:47
create_fragment	@	root.svelte:45
init	@	chunk-I3KZ4WQP.js?v=d2d889bf:2148
Root	@	root.svelte:23
createProxiedComponent	@	svelte-hooks.js?v=ce2bc517:341
ProxyComponent	@	proxy.js?v=ce2bc517:242
Proxy<Root>	@	proxy.js?v=ce2bc517:349
initialize	@	client.js?v=d2d889bf:434
_hydrate	@	client.js?v=d2d889bf:2388
await in _hydrate		
(anonymous)	@	overview:8060
Promise.then		
(anonymous)	@	overview:8059
Show less

I traced it to the following code in the chunk, specifically the root: options.target || parent_component.$$.root line. From looking at context: assignment a few lines above that checks for the parent_component to be undefined, I am guessing the root: assignment needs a similar check.

function init(component, options, instance, create_fragment, not_equal2, props, append_styles2 = null, dirty = [-1]) {
  const parent_component = current_component;
  set_current_component(component);
  const $$ = component.$$ = {
    fragment: null,
    ctx: [],
    // state
    props,
    update: noop,
    not_equal: not_equal2,
    bound: blank_object(),
    // lifecycle
    on_mount: [],
    on_destroy: [],
    on_disconnect: [],
    before_update: [],
    after_update: [],
    context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
    // everything else
    callbacks: blank_object(),
    dirty,
    skip_bound: false,
    root: options.target || parent_component.$$.root
  };

Reproduction

I am getting the error while working on my project. I can't share the code really, but the `+layout.svelte' file referenced in the call stack is the root layout of the project. The referenced line looks like this:

  $: if (browser) setUserDetails($account);

Logs

No response

System Info

System:
    OS: Linux 6.8 Linux Lite 7.0 24.04 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 23.09 GB / 30.72 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 18.20.4 - ~/.bin/node/bin/node
    npm: 10.8.2 - ~/.bin/node/bin/npm
  Browsers:
    Chrome: 127.0.6533.99
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.2 
    @sveltejs/adapter-node: ^5.0.0 => 5.2.0 
    @sveltejs/kit: ^2.0.0 => 2.5.20 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.1 
    svelte: ^4.2.7 => 4.2.18 
    vite: ^5.0.3 => 5.4.0

Severity

annoyance

Additional Information

No response