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

issuing a goto('/route') to an internal svelte page that redirects to an external url throws an "Error: Not found: /api/user" error #9399

Closed
opensas opened this issue Mar 11, 2023 · 8 comments · Fixed by #9424
Closed

issuing a goto('/route') to an internal svelte page that redirects to an external url throws an "Error: Not found: /api/user" error #9399

opensas opened this issue Mar 11, 2023 · 8 comments · Fixed by #9424
Labels
bug Something isn't working ready to implement please submit PRs for these issues!
Milestone
soon

Comments

@opensas
Copy link

opensas commented Mar 11, 2023 •
edited

Describe the bug

When issuing a goto('/redirect) to an internal route handled by an +page.ts that redirects to an external url, throws external url throws an "Error: Not found: /api/user" error

Note: te docs says

goto
Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified url. For external URLs, use window.location = url instead of calling goto(url).

But in this case I'm navigating to an internal url (/redirect). The problem is that /redirect redirect to an external url (https://www.google.com) but sveletkit tries to handle it like if it were an internal one. Sveltekit should recognize it's external and just redirect user.

Note: you need to have the inspector (F12) open to see the error

The debugger then stops in the following line

	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
			});
		}

		if (__SVELTEKIT_DEV__) {
			console.error(
				'An error occurred while loading the page. This will cause a full page reload. (This message will only appear during development.)'
			);

			debugger; // --> stops here
		}

		return await native_navigation(url);
	}

It seems like svelkit can't recognize an external url (in thi case https://www.google.com) and tries to handle it using the defined routes, when it can't find it it throws an error

Expected behaviour

Sveltekit should recognize when an internal route (+page.ts, +page.server.ts, +server.ts) is redirecting user to an external url and stop trying to process it.

Note this is happening with the following version:

"@sveltejs/kit": "^1.5.0"
"svelte": "^3.54.0",

With version
"@sveltejs/kit": "^1.10.0",
"svelte": "^3.54.0",
it worked ok

Reproduction

this github repo has a complete example: https://github.com/opensas/goto-api-route-svelte-issue

you can open it in gitpod with: https://gitpod.io/#https://github.com/opensas/goto-api-route-svelte-issue

create a new project

put thin into src/routes/+page.svelte

<script lang="ts">
	import { goto } from "$app/navigation";
</script>

<button on:click={() => goto('/redirect')}>goto('/redirect') (debugger error!!!)</button>

<br />

<button on:click={() => window.location.href = '/redirect'}>window.location.href = '/redirect' (OK!!!)</button>

and this in /routes/redirect/+page.ts (same issue happens with a +page.server.ts or a +server.ts api route)

import { redirect } from '@sveltejs/kit';

export const load = (async () => {
	throw redirect(302, 'https://www.google.com/');
})

start the project
navigate to http://localhost:5173/
open debugger (F12)
click on the goto('/redirect') button

Error: Not found: /api/user
An error occurred while loading the page. This will cause a full page reload. (This message will only appear during development.)

Logs

Error: Not found: /
    update http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:283
    navigate http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1152
    goto http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:210
    update http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:312
    navigate http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1152
    goto http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:210
    goto http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1367
    click_handler http://localhost:5173/src/routes/+page.svelte:120
    listen http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:360
    listen_dev http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1987
    mount http://localhost:5173/src/routes/+page.svelte:79
    m http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=dd245c85:291
    mount_component http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1781
    mount http://localhost:5173/.svelte-kit/generated/root.svelte:266
    mount http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte?v=dd245c85:32
    m http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=dd245c85:291
    mount_component http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1781
    mount http://localhost:5173/.svelte-kit/generated/root.svelte:168
    mount http://localhost:5173/.svelte-kit/generated/root.svelte:466
    mount_component http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1781
    init http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1864
    Root http://localhost:5173/.svelte-kit/generated/root.svelte:688
    createProxiedComponent http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=dd245c85:341
    ProxyComponent http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/proxy.js?v=dd245c85:242
    Proxy<Root> http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/proxy.js?v=dd245c85:349
    initialize http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:442
    _hydrate http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1784
    start http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/start.js:22
    <anonymous> http://localhost:5173/:35
    promise callback* http://localhost:5173/:34
[app.js:18:41](http://localhost:5173/home/sas/devel/apps/glas-it/apps/wingback/tmp/goto-api-route/.svelte-kit/generated/client/app.js)
    handleError http://localhost:5173/home/sas/devel/apps/glas-it/apps/wingback/tmp/goto-api-route/.svelte-kit/generated/client/app.js:18
    handle_error http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1328
    update http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:283
    navigate http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1152
    goto http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:210
    update http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:312
    navigate http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1152
    goto http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:210
    goto http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1367
    click_handler http://localhost:5173/src/routes/+page.svelte:120
    (Async: EventListener.handleEvent)
    listen http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:360
    listen_dev http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1987
    mount http://localhost:5173/src/routes/+page.svelte:79
    m http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=dd245c85:291
    mount_component http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1781
    mount http://localhost:5173/.svelte-kit/generated/root.svelte:266
    mount http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte?v=dd245c85:32
    m http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=dd245c85:291
    mount_component http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1781
    mount http://localhost:5173/.svelte-kit/generated/root.svelte:168
    mount http://localhost:5173/.svelte-kit/generated/root.svelte:466
    mount_component http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1781
    init http://localhost:5173/node_modules/.vite/deps/chunk-FALHZI6R.js?v=dd245c85:1864
    Root http://localhost:5173/.svelte-kit/generated/root.svelte:688
    createProxiedComponent http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/svelte-hooks.js?v=dd245c85:341
    ProxyComponent http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/proxy.js?v=dd245c85:242
    Proxy<Root> http://localhost:5173/node_modules/.pnpm/svelte-hmr@0.15.1_svelte@3.56.0/node_modules/svelte-hmr/runtime/proxy.js?v=dd245c85:349
    initialize http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:442
    _hydrate http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=dd245c85:1784
    start http://localhost:5173/node_modules/.pnpm/@sveltejs+kit@1.11.0_svelte@3.56.0+vite@4.1.4/node_modules/@sveltejs/kit/src/runtime/client/start.js:22
    <anonymous> http://localhost:5173/:35
    (Async: promise callback)
    <anonymous> http://localhost:5173/:34
An error occurred while loading the page. This will cause a full page reload. (This message will only appear during development.)

System Info

System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 983.89 MB / 15.08 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 16.19.1 - /usr/bin/node
    npm: 8.19.3 - /usr/bin/npm
  Browsers:
    Brave Browser: 111.1.49.120
    Chrome: 111.0.5563.64
    Firefox: 110.0.1

Severity

there's a workaround (window.location.href = 'external_url'), but you have to be aware that an internal route ('/redirect') is redirecting to an external one to avoid using goto)

Additional Information

github repo: https://github.com/opensas/goto-api-route-svelte-issue

running example at https://gitpod.io/#https://github.com/opensas/goto-api-route-svelte-issue
@KTruong008
Copy link

KTruong008 commented Mar 13, 2023 •
edited

Just wanted to add I ran into the same error message while trying to call goto() to redirect to a stripe checkout:

Error: Not found: /c/pay/cs_test_a1qHzGd4H7...

The url I passed in looked like https://checkout.stripe.com/c/pay/cs_test_a1qHzGd4H7...

For me It broke on @sveltejs/kit": "1.11.0", and it was fixed when I downgraded to @sveltejs/kit": "1.10.0"

@zyxd
Copy link

zyxd commented Mar 13, 2023 •
edited

I can confirm this problem even when using <a href="/hello"> instead of goto('/hello').

// routes/hello/server.js
export function GET() {
  return new Response('hello')
}

A temporary solution is to use window.location = '/hello' or downgrade to 1.10.0.
#9305

@opensas
Copy link
Author

opensas commented Mar 14, 2023

and as @zyxd suggested I'm using windows.location.href, I even defined my own goto function to leave the rest of the code unchanged:

	// see issue: https://github.com/sveltejs/kit/issues/9399#issuecomment-1466109848
	const goto = (url: string) => (window.location.href = url);

@opensas opensas changed the title issuing a goto('/api/user') from client throws a "Error: Not found: /api/user" error issuing a goto('/route') to an internal svelte page that redirects to an external url throws an "Error: Not found: /api/user" error Mar 14, 2023
@opensas
Copy link
Author

opensas commented Mar 14, 2023 •
edited

I found out that the problem arises given the following conditions:

  • uses goto to navigate to an internal route (or internal API)
  • the route (+page.ts, +page.server.ts or +server.ts) issues a redirect to an external site
  • sveltekit doesn't recognize it's an external site and tries to process it (and when it can't find it in their own routes if raises a Not found error)

using window.location.href = 'internal route' works as a workaround, but it forces you to be aware of the internal behavior of the svelte route (knowing if it redirects to an external route)

please have a look at the updated issue and sample project

@opensas
Copy link
Author

opensas commented Mar 14, 2023

Just wanted to add I ran into the same error message while trying to call goto() to redirect to a stripe checkout:

Error: Not found: /c/pay/cs_test_a1qHzGd4H7...

The url I passed in looked like https://checkout.stripe.com/c/pay/cs_test_a1qHzGd4H7...

For me It broke on @sveltejs/kit": "1.11.0", and it was fixed when I downgraded to @sveltejs/kit": "1.10.0"

In the docs it tells you to use goto only for internal routes, and use window.location.href for external one, the problem with my example is that it is an internal route that redirect to an external route, and sveltekit treats it as an internal one anyway is using goto.

@dummdidumm dummdidumm added bug Something isn't working ready to implement please submit PRs for these issues! labels Mar 15, 2023
@dummdidumm dummdidumm added this to the soon milestone Mar 15, 2023
dummdidumm added a commit that referenced this issue Mar 15, 2023
@dummdidumm
fix: don't start debugger on 404s
2948ed9 
closes #9399
@dummdidumm dummdidumm mentioned this issue Mar 15, 2023
Merged
5 tasks
@opensas
Copy link
Author

opensas commented Mar 15, 2023 •
edited

I was thinking that perhaps an easier approach would be to make goto a bit more intelligent, so it can recognize when a route is not internal, skip SvelteKit processing and just issue the redirect. That way, we could tell users to always use goto for internal or external urls, and SvelteKit will be smart enough to know when it has to intervene and handle it.

@opensas
Copy link
Author

opensas commented Mar 17, 2023 •
edited

I can confirm that this issue is solved in @sveltejs/kit@1.12.0 - #9391

@wtachau
Copy link
Contributor

wtachau commented Jul 21, 2023

I believe I'm seeing this issue again, with Svelte version 4.0.5 and SvelteKit 1.22.3.

Calling goto with an API route (in this case, /api/login which begins an OAuth flow) causes a client error, which ends up getting logged to Sentry, etc.

Am I holding it wrong? Would it be helpful to create a reproduction or is the team aware? Let me know how I can be helpful, thanks!

CleanShot.2023-07-21.at.10.03.52.mp4

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 ready to implement please submit PRs for these issues!
Projects
None yet
Milestone
soon
Development

Successfully merging a pull request may close this issue.

fix: don't start debugger on 404s sveltejs/kit
5 participants
@zyxd @opensas @wtachau @dummdidumm @KTruong008