Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
2 tasks done
timephy opened this issue Sep 11, 2024 · 0 comments · Fixed by sveltejs/svelte-eslint-parser#561
Closed
2 tasks done

Comments

@timephy
Copy link

timephy commented Sep 11, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant