ESLint v9 config type error

hyunbinseo commented 2 months ago

Describe the bug

Type '({ readonly rules: Readonly<RulesRecord>; } | { plugins: { readonly svelte: Plugin; }; files?: undefined; languageOptions?: undefined; rules?: undefined; processor?: undefined; } | ... 4 more ... | Config)[]' is not assignable to type 'FlatConfig<RulesRecord>[]'.
  Type '{ readonly rules: Readonly<RulesRecord>; } | { plugins: { readonly svelte: Plugin; }; files?: undefined; languageOptions?: undefined; rules?: undefined; processor?: undefined; } | ... 4 more ... | Config' is not assignable to type 'FlatConfig<RulesRecord>'.
    Type '{ files: string[]; languageOptions: { parser: any; }; rules: { 'no-inner-declarations': string; 'no-self-assign': string; 'svelte/comment-directive': string; 'svelte/system': string; }; processor: string; plugins?: undefined; }' is not assignable to type 'FlatConfig<RulesRecord>'.
      The types of 'rules['svelte/comment-directive']' are incompatible between these types.
        Type 'string' is not assignable to type 'RuleEntry<SvelteCommentDirective> | undefined'.ts(2322)

Reproduction

pnpm create svelte@latest

# create-svelte version 6.1.0
# 
# ┌  Welcome to SvelteKit!
# │
# ◇  Where should we create your project?
# │  - create-svelte@6.1.0
# │
# ◇  Which Svelte app template?
# │  - Skeleton project
# │
# ◇  Add type checking with TypeScript?
# │  - Yes, using TypeScript syntax
# │
# ◇  Select additional options (use arrow keys/space bar)
# │  - Add ESLint for code linting, Add Prettier for code formatting
# │
# └  Your project is ready!

Logs

No response

System Info

System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 178.81 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.12.2 - ~/.volta/tools/image/node/20.12.2/bin/node
  npm: 10.5.0 - ~/.volta/tools/image/node/20.12.2/bin/npm
  pnpm: 8.15.6 - ~/.volta/bin/pnpm
Browsers:
  Chrome: 123.0.6312.122
  Edge: 123.0.2420.81
  Safari: 17.4.1
npmPackages:
  @sveltejs/adapter-auto: ^3.0.0 => 3.2.0 
  @sveltejs/kit: ^2.0.0 => 2.5.5 
  @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.0 
  svelte: ^4.2.7 => 4.2.13 
  vite: ^5.0.3 => 5.2.8

Severity

blocking an upgrade

Additional Information

No response

benmccann commented 2 months ago

This seems like something that would have to be fixed on the eslint side. It's probably best to file an issue there about it

hyunbinseo commented 1 month ago

The same issue occurs in create-svelte@6.3.0 with ESLint v9.

Maybe the @types/eslint v8 is not compatible with ESLint v9? Source

// Current dev dependencies
{
  // ...
  "@types/eslint": "^8.56.7",
  "eslint": "^9.0.0",
}

benmccann commented 1 month ago

It looks like @types/eslint-config-prettier needs to be installed

I only get all those red squiggles if installing @types/eslint__js. By default it just says the types for @eslint/js are missing, which is a bit better

hyunbinseo commented 1 month ago

I can confirm. Recreating a new project, I get the following errors:

Could not find a declaration file for module '@eslint/js'. Could not find a declaration file for module 'eslint-config-prettier'.

I still can't get remove the squiggles on an existing project that was upgraded.

It seems to be importing the correct type definition from the identical file.

@types/eslint__js is not installed in this pnpm workspace.

Commenting these three lines does remove the error.

export default [
  js.configs.recommended,
  // ...ts.configs.recommended,
  // ...svelte.configs['flat/recommended'],
  prettier,
  // ...svelte.configs['flat/prettier'],
  // ...
]

hyunbinseo commented 1 month ago

@benmccann The out-of-the box SvelteKit template gives squiggles. Can you check again?

Here is the full reproduction video. Happens on both pnpm and npm.

https://github.com/sveltejs/kit/assets/47051820/23e35703-a14d-4397-b5ad-df3df52dbe49

benmccann commented 1 month ago

Well either way it seems like the issue is that the types upstream need to be updated. There's not much we can do about it here until then. You could try filing an issue upstream

sveltejs / kit