Failure to fetch `/__data.json?x-sveltekit-invalidated` on "rerouted" pages in development

[vnphanquang]

Describe the bug

Following the new reroute hook from https://github.com/sveltejs/kit/pull/11537, invalidating load function(s) on a "rerouted" page will result in a 404 error for __data.json?x-sveltekit-invalidated=... (invoking invalidate or invalidateAll from $app/navigation).

Please note that this does NOT happen in build output from my test with preview script and @sveltejs/adapter-static.

---

For example, with the following reroute setup...

// src/hooks.js

/** @type {Record<string, string>} */
const translated = {
	'/en': '/',
};

/** @type {import('@sveltejs/kit').Reroute} */
export function reroute({ url }) {
	console.log(`REROUTE`, url.toString());
	if (url.pathname in translated) {
		return translated[url.pathname];
	}
}

..., calling invalidateAll while on /en page will cause kit to throw the aforementioned 404...

<!-- src/routes/+page.svelte -->
<script>
	import { invalidateAll } from '$app/navigation';
</script>

<button on:click={() => invalidateAll()}>Invalidate</button>

Reproduction

Please follow the steps below:

1. Clone project at https://github.com/vnphanquang/sveltekit-reroute-invalidate-load-function-reproduction,
2. install dependencies,
3. start dev script,
4. go to http://localhost:5173/en,
5. click on invalidate button,
6. observe 404 on page and logs from both browser and terminal.

Logs

REROUTE http://localhost:5173/en/__data.json?x-sveltekit-invalidated=01
SvelteKitError: Not found: /en
    at resolve ([...truncated...]/test-reroute-hooks/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:495:13)
    at resolve ([...truncated...]/test-reroute-hooks/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:295:5)
    at #options.hooks.handle ([...truncated...]/test-reroute-hooks/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:63:56)
    at Module.respond ([...truncated...]/test-reroute-hooks/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:292:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 3.29 GB / 15.57 GB
    Container: Yes
    Shell: 3.7.0 - /usr/bin/fish
  Binaries:
    Node: 20.10.0 - ~/.volta/tools/image/node/20.10.0/bin/node
    npm: 10.2.3 - ~/.volta/tools/image/node/20.10.0/bin/npm
    pnpm: 8.10.0 - ~/.volta/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.0 
    @sveltejs/adapter-static: ^3.0.1 => 3.0.1 
    @sveltejs/kit: ^2.3.2 => 2.3.2 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1 
    svelte: ^4.2.7 => 4.2.8 
    vite: ^5.0.3 => 5.0.11

Severity

annoyance

Additional Information

This might be related to some other open issues about __data.json

[vnphanquang]

Workaround for now

// src/hooks.js

/** @type {Record<string, string>} */
const translated = {
	'/en': '/',
};

/** @type {import('@sveltejs/kit').Reroute} */
export function reroute({ url }) {
	console.log(`REROUTE`, url.toString());

	let suffix = '';
	let pathname = url.pathname;
	const segments = pathname.split('/');
	const lastSegment = segments.at(-1);
	if (lastSegment && /\.\w+$/.test(lastSegment)) {
		suffix = '/' + lastSegment;
		pathname = segments.slice(0, -1).join('/');
	}

	if (pathname in translated) {
		return translated[pathname] + suffix;
	}
}

[alesvaupotic]

Thanks, @vnphanquang! I've been facing the same behaviour and wasn't sure what is going on. I also noticed reroute runs for every mouse move over link, not on enter only.

[vnphanquang]

@alesvaupotic yeah if link options is set up for preloading, hovering on links might trigger client-side fetching for page data, which should hit reroute hook.