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
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: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 insidesvelte.config.js
:❗❗❗ After removing
compilerOptions
entirely (OR force-settingsrunes: true
) thenpnpm eslint .
did not raise'$state' is not defined
no more.It seems like eslint thinks
runes: false
whenever acompilerOptions
exists, even when not specifyingrunes
.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.