ESLint v9 config type error

[hyunbinseo]

Describe the bug

• feat: upgrade eslint to v9 #12268
• feat: upgrade eslint in create-svelte to v9 #12089

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]

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]

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]

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]

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]

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

2024-06-02.191117.mp4

[benmccann]

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