Wrong typing in flat config: SourceType

[phil294]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 9.10.0
• eslint-plugin-vue version: 9.28.0
• Vue version: 3.5.5
• Node version: 18.20.4
• Operating System: Manjaro Linux

Please show your full configuration:

// eslint.config.mjs
import pluginVue from 'eslint-plugin-vue'

/** @type {import('eslint').Linter.Config[]} */
export default [
    ...pluginVue.configs['flat/recommended'],
]

What did you do?

enable strict type checking in JS files

What did you expect to happen? no error in lint config

What actually happened?

TS doesn't like the types here:

Type '({ name: string; plugins: { readonly vue: { meta: typeof import("/home/phi/b/git-log--graph-vscode-ext/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'fla...' is not assignable to type 'Config<RulesRecord>[]'.
  Type '{ name: string; plugins: { readonly vue: { meta: typeof import("/home/phi/b/git-log--graph-vscode-ext/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat...' is not assignable to type 'Config<RulesRecord>'.
    Type '{ name: string; plugins: { readonly vue: { meta: typeof import("/home/phi/b/git-log--graph-vscode-ext/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat...' is not assignable to type 'Config<RulesRecord>'.
      The types of 'languageOptions.sourceType' are incompatible between these types.
        Type 'string' is not assignable to type 'SourceType | undefined'.ts(2322)

Repository to reproduce this issue

https://github.com/phil294/bug-repro-vue-eslint

Clone and open in VSCode, open eslint.config.mjs

[salazarr-js]

when using a .ts config file the eslint-plugin-vue doesn't satisfy the Linter.Config[] type

eslint.config.ts

import type { Linter } from "eslint"
import pluginVue from "eslint-plugin-vue"

export default [
  ...pluginVue.configs["flat/recommended"], // ⚠️
] satisfies Linter.Config[]

Type '({ name: string; plugins: { readonly vue: { meta: typeof import("c:/Users/slzr/Dev/Personal/three-app/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat...' does not satisfy the expected type 'Config<RulesRecord>[]'.
  Type '{ name: string; plugins: { readonly vue: { meta: typeof import("c:/Users/slzr/Dev/Personal/three-app/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat/...' is not assignable to type 'Config<RulesRecord>'.
    Type '{ name: string; plugins: { readonly vue: { meta: typeof import("c:/Users/slzr/Dev/Personal/three-app/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat/...' is not assignable to type 'Config<RulesRecord>'.
      The types of 'languageOptions.sourceType' are incompatible between these types.
        Type 'string' is not assignable to type 'SourceType | undefined'.ts(1360)

something similar happened when using the typescript-eslint .config() function

import ts from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default ts.config(
  ...pluginVue.configs["flat/recommended"], // ⚠️
)

Argument of type '{ name: string; plugins: { readonly vue: { meta: typeof import("c:/Users/slzr/Dev/Personal/three-app/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat/...' is not assignable to parameter of type 'ConfigWithExtends'.
  Type '{ name: string; plugins: { readonly vue: { meta: typeof import("c:/Users/slzr/Dev/Personal/three-app/node_modules/eslint-plugin-vue/lib/meta"); configs: { base: { parser: string; parserOptions: { ecmaVersion: number; sourceType: string; }; env: { ...; }; plugins: string[]; rules: { ...; }; }; ... 13 more ...; 'flat/...' is not assignable to type 'ConfigWithExtends'.
    The types of 'languageOptions.sourceType' are incompatible between these types.
      Type 'string' is not assignable to type 'SourceType | undefined'.ts(2345)

✅ Workaround

The problem can be easily fixed by adding the correct type assertion.

[
  ...pluginVue.configs["flat/recommended"] as Linter.Config[], // ✅
]

[FloEdelmann]

This is probably because eslint-plugin-vue does not export type declarations yet. It was previously suggested to add them and it has already been implemented, but not yet released. See:

• 2523

• 2528

• 2566

Could you please check whether those type declarations would fix the typing problems for you?

[FloEdelmann]

https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.29.0 containing theses changes was just released. Is the problem now fixed?

[phil294]

Yes it does! :) Thank you