sveltejs / eslint-plugin-svelte

ESLint plugin for Svelte using AST
https://sveltejs.github.io/eslint-plugin-svelte/
MIT License
306 stars 38 forks source link

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

Closed timephy closed 2 months ago

timephy commented 2 months ago

Before You File a Bug Report Please Confirm You Have Done The Following...

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 ```js 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.