Bug: Error while loading rule '@typescript-eslint/consistent-type-imports': You have used a rule which requires parserServices to be generated

[gimi-anders]

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.
• I have searched for related issues and found none that matched my issue.
• I have read the FAQ and my problem is not listed.

Relevant Package

typescript-eslint

Playground Link

No response

Repro Code

overrides: [
    {
      files: ["*.js", "*.jsx"],
      parser: "@babel/eslint-parser",
      parserOptions: {
        project: "./jsconfig.json",
      },
    },
  ]

ESLint Config

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
  },
  overrides: [
    {
      files: ["*.js", "*.jsx"],
      parser: "@babel/eslint-parser",
      parserOptions: {
        project: "./jsconfig.json",
      },
    },
  ]
};

tsconfig

{
  "compilerOptions": {
    // ...
  }
}

Expected Result

I expected to be able to run lint successfully.

Actual Result

I was not able to run lint. I got this error message:

Error: Error while loading rule '@typescript-eslint/consistent-type-imports': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: [path-to-project]/node_modules/@babel/eslint-parser/lib/index.cjs
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.
Occurred while linting [path-to-project]/.eslintrc.js

Additional Info

I have configured eslint to use different parser for js and ts files. This causes issue with version 7.4.0 of @typescript-eslint/parser.

Note that everything works fine with version 7.3.1.

Versions

package	version
@typescript-eslint/eslint-plugin	7.4.0
@typescript-eslint/parser	7.4.0
TypeScript	5.4.3
ESLint	8.57.0

[JoshuaKGoldberg]

Parser: [path-to-project]/node_modules/@babel/eslint-parser/lib/index.cjs

We don't (and can't reasonably) support @babel/eslint-parser. It generates a shape different from what our tooling expects.

Playground Link
No response

Looks like you used the wrong issue template 🙂. We'll need a full reproduction to be able to help. This issue doesn't have your package.json, lockfile, etc. Could you please post a way for me, an internet stranger, to reproduce what you're seeing?

If there was a change in our handling of unsupported parsers between versions, we'd want to investigate. But without a real reproduction we can't.

Oh, and:

• Out of curiosity, why are you using @babel/eslint-parser? I haven't felt or seen a real need for it in JS files in quite a few years
• Looks like Feature: Improve error message reported by getParserServices #8482 -> feat(utils): add parser name to thrown parser error message #8484 is coming in handy for reporting the detected parser. Nicely done @disaacson! 😄

[gimi-anders]

@JoshuaKGoldberg Sorry for using wrong template, I was unsure which one to use.

There are no good reasons we are using @babel/eslint-parser. Our eslint config hasn't been updated for a long time, so it is just how it was configured back in time.
What parsers would you recommend, or how do you recommend us to configure eslint when we have both *.js and *.ts files in our project?

Sorry for not providing our package.json or lockfile, I will attach it here.

package.json

[JoshuaKGoldberg]

Super thanks!

I'd recommend removing the @babel/eslint-parser entry and always using @typescript-eslint/parser. It supports both JS and TS code. If that doesn't work for you, our community Discord has a #help channel you can ask for more detailed help on.

I filed typescript-eslint/typescript-eslint-examples#10 to track adding more concrete examples showing this.

[bradzacher]

I would also recommend checking out our getting started guide for steps to setup your codebase:
https://typescript-eslint.io/getting-started/

[frankykubo]

I have same problem using @typescript-eslint/parser on vue project.

[JoshuaKGoldberg]

repro pls

[frankykubo]

I noticed that if I use "@vue/eslint-config-typescript": "^12.0.0",, i dont get such error. If I update it to "@vue/eslint-config-typescript": "^13.0.0",, this error shows up.

Here is my .eslintrc.cjs:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:cypress/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  ignorePatterns: 'cypress/*',
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  plugins: ['vue', 'cypress', 'import', 'import-newlines'],
  settings: {
    'import/resolver': {
      typescript: {}, // This will use <root>/tsconfig.json by default
      node: {
        extensions: ['.js', '.ts', '.vue'],
      },
    },
  },
  rules: {
    'array-bracket-spacing': [2, 'never'],
    'arrow-spacing': [2, {
      'before': true,
      'after': true,
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs'],
    'camelcase': [0, {
      'properties': 'always',
    }],
    'comma-dangle': ['error', 'always-multiline'],
    'comma-spacing': [2, {
      'before': false,
      'after': true,
    }],
    'comma-style': [2, 'last'],
    'curly': [2, 'all'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1,
    }],
    'allowIndentationTabs': 'off',
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true,
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true,
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false,
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-async-promise-executor': 'off',
    'no-caller': 2,
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-eval': 2,
    'no-extend-native': 2,
    'no-extra-parens': [2, 'functions'],
    'no-floating-decimal': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, {
      'allowLoop': false,
      'allowSwitch': false,
    }],
    'no-lone-blocks': 2,
    'no-multi-spaces': 2,
    'no-multiple-empty-lines': [2, {
      'max': 1,
    }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-wrappers': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-spaced-func': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef-init': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false,
    }],
    'no-unused-vars': 'off',
    'no-useless-call': 2,
    'no-useless-escape': 0,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-whitespace-before-property': 2,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false,
    }],
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before',
      },
    }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true,
    }],
    'semi': ['error', 'always'],
    'semi-spacing': [2, {
      'before': false,
      'after': true,
    }],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false,
    }],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
    }],
    'template-curly-spacing': [2, 'never'],
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'vue/max-attributes-per-line': [2, {
      'singleline': 10,
      'multiline': 1,
    }],
    'vue/name-property-casing': ['off', 'PascalCase' | 'kebab-case'],
    'vue/no-v-html': 'off',
    'vue/no-multiple-template-root': 'off',
    'vue/no-v-for-template-key': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/v-on-event-hyphenation': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/consistent-type-imports': [
      'error',
      {
        'prefer': 'type-imports',
        'disallowTypeAnnotations': false,
      },
    ],
    '@typescript-eslint/no-non-null-assertion': 'off',
    'vue/no-setup-props-destructure': 'off',
    // Your existing rules...
    'import/order': ['error', {
      'groups': [
        'builtin',
        'external',
        'internal',
        'parent',
        'sibling',
        'index',
        'object',
        'type',
      ],
      'pathGroups': [
        {
          'pattern': '@/**/*',
          'group': 'internal',
        },
        {
          'pattern': './**/*',
          'group': 'internal',
        },
      ],
      'newlines-between': 'never',
      'alphabetize': {
        'order': 'asc',
        'caseInsensitive': true,
      },
    }],
    'import/first': 'error',
    'import/no-duplicates': 'error',
    'import/no-unresolved': 'error',
    // 'object-curly-newline': ['error', {
    //   'ImportDeclaration': 'never',
    // }],
    'import-newlines/enforce': ['error', { items: 40, 'max-len': 200 }],
  },
};

[bradzacher]

@frankykubo I'm going to go ahead and say to file a new issue.
Your issue is unrelated to this one.

The same error message but clearly a different cause given that OP encountered this due to the babel parser and you're using the Vue parser.

Please file a new issue using the 🐛 Complex Bug With a Reproduction template and provide us with a repro repo with the required dependencies and reproduction steps.

Additionally we ask for a MINIMAL reproduction - just the minimum config and deps to reproduce the error. That config is quite far from minimal!