Cannot call goto on the server

[sooxt98]

Describe the bug

as title, asking for work around

Reproduction

<script> 
  import { goto } from '$app/navigation';
  goto("/route")
</script>

<script> 
  import { goto } from '$app/navigation';
  $: {
    setTimeout(() => goto('/route'), 5000);
  }
</script>

https://stackoverflow.com/a/68187637/6829093

Logs

/.svelte-kit/dev/runtime/app/navigation.js:15
                throw new Error(`Cannot call ${name}(...) on the server`);
                ^

Error: Cannot call goto(...) on the server
    at Module.eval (/.svelte-kit/dev/runtime/app/navigation.js:15:9)
    at Timeout.eval [as _onTimeout] (/src/routes/__layout.svelte:64:43)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7)

Node.js v17.2.0

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 98.73 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Edge: 96.0.1054.62
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.4 
    @sveltejs/adapter-static: ^1.0.0-next.22 => 1.0.0-next.22 
    @sveltejs/kit: next => 1.0.0-next.202 
    svelte: ^3.44.0 => 3.44.3

Severity

annoyance

Additional Information

No response

[bluwy]

goto is not available on the server. You will need to either

1. Return a redirect property (https://kit.svelte.dev/docs/loading#output-redirect) https://kit.svelte.dev/docs/load#redirects
2. Call goto inside onMount()
3. Guard with if (browser) from $app/env

[bluwy]

Yeah, perhaps we can document that $app/navigation only works in the client-side. I guess it has always been an implied knowledge. goto would never work in the server since there's no history navigation there. We could have goto do nothing if we want to, but that would be confusing later that it doesn't work. PR welcome though to explain that it doesn't work on the server / only works in the client.

[justingolden21]

Ironically, the redirect link is a 404

[Wolfr]

https://kit.svelte.dev/docs/load#redirects

[joesdevil]

@bluwy thank uu

[gregg-cbs]

I think svelte should have one 'redirect' function that lets you use it where ever you want and in it it checks if browser and decides whether to goto or redirect.

I dont understand why we need two different functions that do the same thing and why we need to put in the extra overhead to determine which one to use when when it could be wrapped up into a single function.

[yaeszlo]

I have updated my project to the newest sveltekit version and using adapter-static and having exactly this issue. the project doesn't build with Error: Cannot call goto(...) on the server and I am asking, why does it fail if I don't do anything with SSR? the +layout.js has prerender = true set

[yuliankarapetkov]

Same issue here. I'm using SPA mode but still getting this error.

[sheijne]

Because the static adapter essentially spins up a server and renders all the urls it can find into html files. So when you're building you're "server side rendering" aka prerendering all the urls of your app at once.

[bobbymannino]

simple way to redirect on the server code is throw redirect(404, '/redirect-url') and that will do it

[danielimmke]

This is still really unclear - we can only do throw redirect on server side files. But what if we want to update a cleaner SPA-style experience that involves stores? The docs explicitly say not to do this. For instance, upon logging in, I want to add a "Toast" notification after the redirect.

I don't want to use a URL parameter like loggedIn=true to trigger the toast on the page I redirect to. Because that can be visited again/persist in a user's history. And I can use goto on a page component with the if(browser) guard but then that doesn't work if progressively enhanced.

The only thing I can think of is to add a guard that the user does NOT have JS enabled before calling a blanket throw redirect and doing the rest client side. I wish there was an established pattern for this to reference.

[bitdom8]

Throw redirect doesn't work on store functions imported.

Ok. This solves it : https://stackoverflow.com/a/75786059/12002600

[gregg-cbs]

Vote to have 'goto' and 'redirect' merged into one easy to use function so we dont have to think about which one to use . We simply use a 'redirect' function and svelte figures out what to do under the hood. Kapish.

[gregg-cbs]

Essentially something like this:

import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { redirect as svelteRedirect, type NumericRange } from '@sveltejs/kit';

export function redirect(path: string, code?: NumericRange<300, 308>) {
  if (browser) {
    return goto(path)
  }
  if (!browser) {
    if (!code) throw Error("redirect: You need to pass a redirect code")
    return svelteRedirect(code, path)
  }
}