Calling `invalidate` on mount in a layout triggers an infinite reload loop on a 404 error

[allezxandre]

Describe the bug

The server_fallback method from here:

kit/packages/kit/src/runtime/client/client.js

Lines 1122 to 1134 in 74798e9

	async function server_fallback(url, route, error, status) {
	if (url.origin === location.origin && url.pathname === location.pathname && !hydrated) {
	// We would reload the same page we're currently on, which isn't hydrated,
	// which means no SSR, which means we would end up in an endless loop
	return await load_root_error_page({
	status,
	error,
	url,
	route
	});
	}
	return await native_navigation(url);
	}

appears to check if the page has hydrated to prevent infinite reloads when a 404 happens.

However, it seems if invalidate is called (for instance in a +layout.svelte component that is parent to the 404-d page), it is my understanding that invalidate waits for the page to hydrate prior to server_fallback being called, and so an infinite redirect loop appears.

Reproduction

Here's a modified template:

StackBlitz Reproduction

The only change is in the root +layout.svelte where the following has been added:

onMount(() => {
    void invalidate('placeholder:identifier')
})

Navigating to a non-existing route like /invalid-link (added to the Header navigation for convenience) will trigger an infinite loop of reloads.

Logs

No response

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) arm64 unknown
    Memory: 931.27 MB / 6.77 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-node: ^1.1.4 => 1.1.4 
    @sveltejs/kit: ^1.2.6 => 1.2.6 
    svelte: ^3.55.1 => 3.55.1 
    vite: ^4.0.4 => 4.0.4

Severity

serious, but I can work around it

Additional Information

No response

[allezxandre]

By the way, for anyone looking for a workaround, if you need to invalidate from a layout component, you can check that $page.error is null prior to calling invalidate:

+if (!$page.error)
    onMount(() => {
        void invalidate('placeholder:identifier')
    })

[dummdidumm]

I can see how that's happening, though I'm wondering why you eagerly invalidate inside onMount - what's your real world use case? I'm not sure how we can fix this without breaking other assumptions about code flows. For example, we could check if the page status is 404 and not reload in that case, but that would break if the page exists on the server (navigated to through the handle hook). For this case we somehow would need to know that

• this is an eager invalidate
• it's on a 404 page
• we already have been on this page before

[allezxandre]

Supabase (documentation here) uses it to store the Supabase session on a Cookie through the server

[Rich-Harris]

As a workaround, perhaps you could wrap the invalidate call in a if ($page.status === 200) block or similar?

[teemingc]

Closing this as it's not reproducible on the latest version of Kit