useSvelteKitResolve (JavaScript)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useSvelteKitResolve
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/no-navigation-without-resolve

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteKitResolve": "error"
6
      }
7
    }
8
  }
9
}

Description

Require internal navigation in SvelteKit apps to use paths built with resolve().

SvelteKit’s resolve() from $app/paths prefixes a route with the app’s base path and checks it against the app’s routes. Passing a hand-written path to goto(), pushState(), or replaceState() breaks navigation when the app is served from a sub-path, and lets typos in routes go unnoticed.

pushState() and replaceState() also accept an empty string, which keeps the current URL for shallow routing.

Paths are also accepted when they come from a variable whose initializer uses resolve(), or from a variable or parameter annotated with the ResolvedPathname type from $app/types.

For navigation to external URLs, use window.location instead of goto().

Examples

Invalid

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

3
goto("/foo");

code-block.js:3:6 lint/nursery/useSvelteKitResolve ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The path passed to goto() isn't built with resolve().
  
    1 │ import { goto } from "$app/navigation";
    2 │ 
  > 3 │ goto("/foo");
      │      ^^^^^^
    4 │ 
  
  ℹ Paths that aren't built with resolve() lack the app's base path, and SvelteKit can't check them against the app's routes.
  
  ℹ Wrap the path in resolve() from $app/paths. To navigate to an external URL, use window.location instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
import { goto } from "$app/navigation";
2
import { resolve } from "$app/paths";
3

4
goto(resolve("/foo") + "/bar");

code-block.js:4:6 lint/nursery/useSvelteKitResolve ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The path passed to goto() isn't built with resolve().
  
    2 │ import { resolve } from "$app/paths";
    3 │ 
  > 4 │ goto(resolve("/foo") + "/bar");
      │      ^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
  ℹ Paths that aren't built with resolve() lack the app's base path, and SvelteKit can't check them against the app's routes.
  
  ℹ Wrap the path in resolve() from $app/paths. To navigate to an external URL, use window.location instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
import { pushState } from "$app/navigation";
2

3
pushState("/foo", {});

code-block.js:3:11 lint/nursery/useSvelteKitResolve ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The path passed to pushState() isn't built with resolve().
  
    1 │ import { pushState } from "$app/navigation";
    2 │ 
  > 3 │ pushState("/foo", {});
      │           ^^^^^^
    4 │ 
  
  ℹ Paths that aren't built with resolve() lack the app's base path, and SvelteKit can't check them against the app's routes.
  
  ℹ Wrap the path in resolve() from $app/paths, or pass an empty string to keep the current URL.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
import { goto, pushState, replaceState } from "$app/navigation";
2
import { resolve } from "$app/paths";
3

4
goto(resolve("/foo"));
5
pushState(resolve("/foo"), {});
6
replaceState(resolve("/foo"), {});
7

8
// Shallow routing
9
pushState("", {});
10
replaceState("", {});

1
import { goto } from "$app/navigation";
2
import type { ResolvedPathname } from "$app/types";
3

4
function navigate(path: ResolvedPathname) {
5
    goto(path);
6
}

Options

`ignoreGoto`

Whether to ignore all goto() calls. Default: false.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteKitResolve": {
6
          "level": "on",
7
          "options": {
8
            "ignoreGoto": true
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

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

3
goto("/foo");

`ignorePushState`

Whether to ignore all pushState() calls. Default: false.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteKitResolve": {
6
          "level": "on",
7
          "options": {
8
            "ignorePushState": true
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
import { pushState } from "$app/navigation";
2

3
pushState("/foo", {});

`ignoreReplaceState`

Whether to ignore all replaceState() calls. Default: false.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteKitResolve": {
6
          "level": "on",
7
          "options": {
8
            "ignoreReplaceState": true
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
import { replaceState } from "$app/navigation";
2

3
replaceState("/foo", {});