Having `compilerOptions` in `svelte.config.js` leads to `'$state' is not defined`

[timephy]

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.10.0

What version of eslint-plugin-svelte are you using?

2.43.0

What did you do?

Configuration

import js from "@eslint/js"
import ts from "typescript-eslint"
import svelte from "eslint-plugin-svelte"
import prettier from "eslint-config-prettier"
import globals from "globals"

/** @type {import('eslint').Linter.Config[]} */
export default [
    js.configs.recommended,
    ...ts.configs.recommended,
    ...svelte.configs["flat/recommended"],
    prettier,
    ...svelte.configs["flat/prettier"],
    {
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.node,
            },
        },
    },
    {
        files: ["**/*.svelte"],
        languageOptions: {
            parserOptions: {
                parser: ts.parser,
                svelteFeatures: {
                    experimentalGenerics: true,
                },
            },
        },
    },
    {
        ignores: ["**/build/", "**/.svelte-kit/", "**/dist/"],
    },
]

I ran pnpm eslint ., this should run eslint on the project. However it threw lots of:

  15:17  error  '$bindable' is not defined                                                                       no-undef
  30:9   error  '$props' is not defined                                                                          no-undef
  32:22  error  '$derived' is not defined                                                                        no-undef

What did you expect to happen?

It should work when having an empty compilerOptions object specified.

What actually happened?

After hours of upgrading/changing versions trying to resolve the issue - At some point I noticed that I had an empty compilerOptions object inside svelte.config.js:

import adapter from "@sveltejs/adapter-node"
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: adapter({
            strict: true,
            fallback: "index.html",
            pages: "build",
            precompress: true,
        }),
    },
    compilerOptions: {
        // TODO: svelte-awesome does not yet support runes mode
        // runes: true,
    },
}

export default config

❗❗❗ After removing compilerOptions entirely (OR force-settings runes: true) then pnpm eslint . did not raise '$state' is not defined no more.

It seems like eslint thinks runes: false whenever a compilerOptions exists, even when not specifying runes.

I believe that an empty compilerOptions object should be treated like an undefined one.

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/timephy/eslint-plugin-svelte-runes-bug

Additional comments

This is a very unpredictable and confuses the user immensely...

The fact that using the same name for the variable fixes the issue is absolutely stunning.