Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
vnphanquang opened this issue Jan 12, 2024 · 3 comments · May be fixed by #13092
Open

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

vnphanquang opened this issue Jan 12, 2024 · 3 comments · May be fixed by #13092
Labels
bug Something isn't working

Comments

@vnphanquang
Copy link
Contributor

vnphanquang commented Jan 12, 2024 •
edited
Loading

Describe the bug

Following the new reroute hook from #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 vnphanquang changed the title Failure to fetch /__data.json?x-sveltekit-invalidated on "rerouted" routes in development Failure to fetch /__data.json?x-sveltekit-invalidated on "rerouted" pages in development Jan 12, 2024
@vnphanquang
Copy link
Contributor Author

vnphanquang commented Jan 13, 2024 •
edited
Loading

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
Copy link

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
Copy link
Contributor Author

vnphanquang commented Feb 7, 2024 •
edited
Loading

@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.

@eltigerchino eltigerchino added the bug Something isn't working label Nov 20, 2024
@eltigerchino eltigerchino linked a pull request Dec 2, 2024 that will close this issue
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: strip internal data before passing URL to reroute sveltejs/kit
3 participants
@alesvaupotic @vnphanquang @eltigerchino