@typescript-eslint/eslint-plugin crashes when applying rules to Vue SFC <script> not parsed with @typescript-eslint/parser

[DrJume]

While using @typescript-eslint/recommended-requiring-type-checking with vue-eslint-parser as parser, @typescript-eslint/parser can't check for types when there is no <script> used in a Vue SFC.

Stacktrace:

Oops! Something went wrong! :(

ESLint: 8.17.0

Error: Error while loading rule '@typescript-eslint/dot-notation': 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.
Occurred while linting /Users/drjume/Desktop/falconDev/my-falcondev/apps/web/src/views/NotFoundView.vue
    at getParserServices (/Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/@[email protected]_ud6rd4xtew5bv4yhvkvu24pzm4/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:16:15)
    at create (/Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/@[email protected]_aq7uryhocdbvbqum33pitcm3y4/node_modules/@typescript-eslint/eslint-plugin/dist/rules/dot-notation.js:85:81)
    at Object.create (/Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/@[email protected]_ud6rd4xtew5bv4yhvkvu24pzm4/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:42:20)
    at createRuleListeners (/Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:922:21)
    at /Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1104:31
    at Array.forEach (<anonymous>)
    at runRules (/Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1041:34)
    at Linter._verifyWithoutProcessors (/Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1389:31)
    at /Users/drjume/Desktop/falconDev/my-falcondev/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1798:29
    at Array.map (<anonymous>)

When adding an empty <script setup lang="ts"></script> the error is not shown anymore when running eslint.

The issue seems to be, that the parserServices or a property of it is missing when there is no <script> in a Vue SFC:

https://github.com/typescript-eslint/typescript-eslint/blob/dc1f9309cf04aa7314e758980ac687558482f47f/packages/utils/src/eslint-utils/getParserServices.ts#L19-L26

[DrJume]

I checked the error and

context.parserServices.program,
context.parserServices.esTreeNodeToTSNodeMap, and
context.parserServices.tsNodeToESTreeNodeMap

are undefined when no <script> is in a Vue SFC.

[DrJume]

Would it be possible to return an "empty" / no-op program in parserServices?

[DrJume]

I found the cause of the issue:

Because I set added following config to the eslint parserOptions:

parserOptions: {
    parser: {
        js: 'espree',
        jsx: 'espree',

        ts: require.resolve('@typescript-eslint/parser'),
        tsx: require.resolve('@typescript-eslint/parser'),
    }
}

and vue-eslint-parser defaults to the js parser when no <script>/lang is found,

vue-eslint-parser/src/common/parser-options.ts

Line 75 in 806a38c

return parser.js

vue-eslint-parser used espree as the scriptParser which does not parse TypeScript.

This caused the parserServices.program and other TS parserServices to be missing for @typescript-eslint/eslint-plugin rules, which gave this error.

[DrJume]

By setting the parser to parser: '@typescript-eslint/parser', it is always used as the scriptParser, giving the rules in @typescript-eslint/recommended-requiring-type-checking the needed TS parserServices.

[DrJume]

It would be awesome to be able to filter .vue with lang="ts" in ESLint overrides.
Currently, it seems to be not possible.

But if there was an ESLint Processor for Vue, it would be possible to filter for the <script> lang (or even <template>?):
https://eslint.org/docs/user-guide/configuring/plugins#specifying-processor.

Would something like this be possible?:

.eslintrc.js

{
    plugin: 'vue',
    processor: 'vue/sfc-processor',
    parser: 'vue-eslint-parser', // why not 'vue/parser'?
    overrides: [
        {
            files: ['*.vue'],
            rules: {
                // ...
            }
        },
        {
            files: ['**/*.vue/*.ts'],
            parser: '@typescript-eslint/parser',
            extends: [
                'plugin:@typescript-eslint/recommended',
                'plugin:@typescript-eslint/recommended-requiring-type-checking',
            ]
        }
    ]
}

[ota-meshi]

Thank you for posting issue.

Would something like this be possible?:

I think it's technically impossible. TypeScript cannot provide type information for virtual filenames.
This means that if we assign a virtual file name, you will not be able to use "recommended-requiring-type-checking".

[ota-meshi]

We recommend using typescript in all your vue files if you want to do type checking.

[freakzlike]

I fixed my error by setting the parserOptions.parser inside the .eslintrc.js:

parserOptions: {
  parser: '@typescript-eslint/parser'
},