Paul A
Paul A

Reputation: 417

Cannot import goto in sveltekit

I am using a brand new installation of sveltekit "svelte": "^3.54.0", When I try to import goto with this code

import { goto } from "$app/navigation";

I get the following typescript error

Cannot find module '$app/navigation' or its corresponding type declarations. ts(2307)

I have nuked the node_modules and that didn't fix it.

Upvotes: 0

Views: 2088

Answers (2)

Entertainment Hub
Entertainment Hub

Reputation: 21

it would be best if you guarded your goto with an if statement and make sure the if statement checks for the browser env variable. Try this code:

<script>
import {browser} from '$app/environment';
import {goto} from '$app/navigation';

$: {
   if(browser && SOME OTHER CONDITION){
   RUN YOUR CODE E.G: goto('/route')
   }
}

</script>

If you're not satisfied with this, then check out this ISSUE raised on GitHub, it worked for me: https://github.com/sveltejs/kit/discussions/3245

Upvotes: 2

brunnerh
brunnerh

Reputation: 185210

Those types are in the SvelteKit package @sveltejs/kit, specifically in @sveltejs/kit/types/ambient.d.ts. The types should be picked up automatically if the package is installed, as far as I know.

The tsconfig.json setup might also matter, it should have an extends entry:

{
    "extends": "./.svelte-kit/tsconfig.json",
    ...
}

Possibly run svelte-kit sync or start the dev server to make it setup the .svelte-kit directory.

Upvotes: 0

Related Questions