Svelte 5: `eslint(no-undef)` rule cannot recognize runes such as `$props` and `$state`

[bkataru]

Describe the bug

I'm trying out Svelte 5 with SvelteKit 2 and TypeScript for a toy project with eslint and prettier configured for linting and formatting respectively. It seems that eslint does not recognize the new runes such as $props and $state even though type declarations exist for them.

For the moment, I am able to get around this issue by configuring globals in .eslintrc.cjs but this seems more of a hack than an actual fix.

globals: {
    $state: 'readonly',
    $props: 'readonly'
}

I realize that this might be more of an issue with ESLint than Svelte 5 itself, so if someone can confirm that for me, I will open a bug report in the ESLint repo instead. Any help would be appreciated.

Reproduction

Here are the relevant config files and an example +page.svelte file that can reproduce the issue in a barebones starter SvelteKit 2 project

.eslintrc.cjs

/** @type { import("eslint").Linter.Config } */
module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:svelte/recommended',
    'prettier'
  ],
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    extraFileExtensions: ['.svelte']
  },
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  ],
  rules: {
    'prettier/prettier': 'error'
  },
  globals: {
    $state: 'readonly',
    $props: 'readonly'
  }
}

.prettierrc.json

{
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "plugins": ["prettier-plugin-svelte"],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

package.json

{
  "name": "core",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && npm run package",
    "preview": "vite preview",
    "package": "svelte-kit sync && svelte-package && publint",
    "prepublishOnly": "npm run package",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --plugin=prettier-plugin-svelte --check . && eslint .",
    "format": "prettier --plugin=prettier-plugin-svelte --write .",
    "generateProtos": "buf mod update && buf generate"
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js"
    }
  },
  "files": [
    "dist",
    "!dist/**/*.test.*",
    "!dist/**/*.spec.*"
  ],
  "peerDependencies": {
    "svelte": "5.0.0-next.1"
  },
  "devDependencies": {
    "@bufbuild/buf": "^1.28.1",
    "@bufbuild/protobuf": "^1.6.0",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/package": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@types/eslint": "8.56.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-svelte": "^2.35.1",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "publint": "^0.1.9",
    "svelte": "^5.0.0-next.1",
    "svelte-check": "^3.6.0",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.0.3"
  },
  "svelte": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "type": "module",
  "dependencies": {
    "@connectrpc/connect": "^1.2.0",
    "@connectrpc/connect-web": "^1.2.0",
    "monaco-editor": "^0.45.0"
  }
}

svelte.config.js

import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter()
  }
}

export default config

tsconfig.json

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "module": "ESNext",
    "moduleResolution": "Bundler"
  },
  "include": ["**/*.ts", "**/*.d.ts"],
  "exclude": ["node_modules"]
}

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [sveltekit()]
})

---

+page.svelte

<script lang="ts">
  let x = $state(4)
</script>

<h1>Welcome to your library project</h1>
<p>
  Create your package using @sveltejs/package and preview/showcase your work
  with SvelteKit
</p>

Logs

No response

System Info

System:
    OS: Linux 6.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 873.70 MB / 7.66 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    bun: 1.0.20 - /usr/local/bin/bun
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.26

Severity

blocking an upgrade

[huntabyte]

Are you running eslint-plugin-svelte@next? @bkataru

[bkataru]

No im running version 2.35.1

[huntabyte]

Update to @next and it will detect the runes. @latest is still for latest Svelte 4 😃

[DollarAkshay]

running npm install eslint-plugin-svelte@next doesnt work.

package.json :