Type Union gets parsed as `VFilterSequenceExpression`

[darioackermann]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I'm using eslint-plugin-vue.
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

9.30.1

What version of eslint-plugin-vue and vue-eslint-parser are you using?

• vue-eslint-parser@10.2.0
• eslint-plugin-vue@10.3.0

What did you do?

Configuration

import pluginVue from 'eslint-plugin-vue'
import {
  defineConfigWithVueTs,
  vueTsConfigs,
} from '@vue/eslint-config-typescript'

export default defineConfigWithVueTs(
    // chosen vue defaults
    pluginVue.configs['flat/recommended'],
    vueTsConfigs.recommended,
)

GenCo.vue

<template>
  This is my generic component
</template>
<script setup lang="ts" generic="T">
</script>

App.vue

<script setup lang="ts">
import GenCo from './components/GenCo.vue'

type User = {
  key: 'User'
  name: string
  age: number
}

type Product = {
  key: 'Product'
  title: string
  price: number
}
</script>

<template>
  <component :is="GenCo<User | Product>" /> <!--  18:19  error  Filters are deprecated               vue/no-deprecated-filter -->
</template>

What did you expect to happen?

No linting error

What actually happened?

Lints as vue/no-deprecated-filter, gets parsed as VFilterSequenceExpression

{
    "type": "VExpressionContainer",
    "text": "\"GenCo<User | Product>\"",
    "children": [
        {
            "type": "VFilterSequenceExpression",
            "text": "GenCo<User | Product>",
            "children": [
                {
                    "type": "BinaryExpression",
                    "text": "GenCo<User",
                    "children": [
                        {
                            "type": "Identifier",
                            "text": "GenCo",
                            "children": []
                        },
                        {
                            "type": "Identifier",
                            "text": "User",
                            "children": []
                        }
                    ]
                },
                {
                    "type": "VFilter",
                    "text": "Product>",
                    "children": [
                        {
                            "type": "Identifier",
                            "text": "Product>",
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

Link to Minimal Reproducible Example

https://github.com/darioackermann/eslint-vue-ts-filter

Additional comments

Originates from vuejs/eslint-plugin-vue#2783

[ota-meshi]

Thank you for the bug report!
As a workaround you may want to turn off filter parsing.

{
    "parserOptions": {
        "vueFeatures": {
            "filter": false
        }
    }
}

https://github.com/vuejs/vue-eslint-parser?tab=readme-ov-file#parseroptionsvuefeaturesfilter

[ota-meshi]

Hmm... I thought about how to fix this problem, but the parsed result is a correct AST when used with Vue2, so I think the only way is to change the default vueFeatures.filter option.
https://github.com/vuejs/vue/blob/9e88707940088cb1f4cd7dd210c9168a50dc347c/src/compiler/parser/filter-parser.ts#L3

Changing option defaults is a breaking change, so we should do this in a major version.