no-navigation-without-resolve doesn't work with search params #1327
Description
Before You File a Bug Report Please Confirm You Have Done The Following...
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest version of the packages.
What version of ESLint are you using?
9.34.0
What version of eslint-plugin-svelte are you using?
3.12.1
What did you do?
Configuration
// ESLint flat config for SvelteKit + TypeScript + Prettier // Migrated from .eslintrc.cjs to eslint.config.js (Flat Config)import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier/flat";
import svelte from "eslint-plugin-svelte";
import globals from "globals";
import svelteConfig from "./svelte.config.js";
// Use the typescript-eslint aggregator for flat config presets
// (requires devDependency: "typescript-eslint")
import tseslint from "typescript-eslint";
export default [
// Ignore generated and build artifacts
{
ignores: [
// migrated from .eslintignore
".DS_Store",
"node_modules",
"build",
".svelte-kit",
"package",
".env",
".env.*",
"pnpm-lock.yaml",
"package-lock.json",
"yarn.lock",
// additional
"dist",
".vite",
"drizzle",
"supabase//migrations/"
]
},
// Base language options and globals
{
languageOptions: {
ecmaVersion: 2020,
sourceType: "module",
globals: {
...globals.browser,
...globals.node,
// Svelte built-in types
$$Generic: "readonly",
App: "readonly"
}
}
},
// Core JS recommended rules
js.configs.recommended,
// TypeScript rules (no type-aware rules by default)
...tseslint.configs.recommended,
// Svelte plugin recommended rules for Svelte files
...svelte.configs["flat/recommended"],
{
files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
languageOptions: {
parserOptions: {
// Ensure TS within <script lang="ts"> is parsed
parser: tseslint.parser,
projectService: true,
extraFileExtensions: [".svelte"],
// Pass through SvelteKit config for better rule behavior
svelteConfig
}
}
},
// Turn off formatting-related Svelte rules to avoid conflicts with Prettier
...svelte.configs["flat/prettier"],
// Project-wide rule tweaks
{
rules: {
"require-yield": "off",
// disabled because it doesn't support search params
"svelte/no-navigation-without-resolve": "off"
}
},
// Keep Prettier last to disable conflicting stylistic rules
eslintConfigPrettier
];
<a
href={`/?redirect=${encodeURIComponent(`${page.url.pathname}${page.url.search}`)}`}
class="bg-base-200/50 text-base-content hover:bg-base-300 flex h-12 items-center gap-2 rounded-lg p-2 transition-colors"
>
<span class="flex h-full flex-1 items-center justify-center font-semibold">Sign In</span>
</a>What did you expect to happen?
I expect to be able to use search params in links and goto without either TS or eslint complaining.
What actually happened?
As far as I can tell, there's no way to make this href work such that it satisfies the resolve() type and the no-navigation-without-resolve rule.
Link to GitHub Repo with Minimal Reproducible Example
eslint complains:
href={`/?redirect=${encodeURIComponent(`${page.url.pathname}${page.url.search}`)}`}
href={resolve("/")+`?redirect=${encodeURIComponent(`${page.url.pathname}${page.url.search}`)}`}typescript complains:
href={resolve(`/?redirect=${encodeURIComponent(`${page.url.pathname}${page.url.search}`)}`)}Additional comments
The only way to make it work is to assert the type:
href={resolve(`/?redirect=${encodeURIComponent(`${page.url.pathname}${page.url.search}`)}` as Pathname & {})}The same problem also occurs for hash (#) urls.
I think href and goto accepting any of the following should help:
type Href = ResolvedPathname || `${ResolvedPathname}?${string}` || `${ResolvedPathname}#${string}`