Linting TSX in Vue SFC file throw error

[Cat1007]

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

• [X] I'm using eslint-plugin-vue.
• [X] 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.
• [X] I have tried restarting my IDE and the issue persists.
• [X] I have updated to the latest version of the packages.

What version of ESLint are you using?

8.22.0

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

• vue-eslint-parser@9.1.0
• eslint-plugin-vue@9.8.0

What did you do?

Configuration

``` module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/vue3-essential", ], plugins: ["vue", "@typescript-eslint"], parser: "vue-eslint-parser", parserOptions: { parser:"@typescript-eslint/parser" , extraFileExtensions: [".vue"], tsconfigRootDir: __dirname, project: './tsconfig.json', ecmaVersion: 2020, ecmaFeatures: { jsx: true, }, }, rules: { "vue/no-unused-components": 1, }, overrides: [ { files: ["*.ts", "*.tsx", "*.vue"], rules: { "@typescript-eslint/no-unused-vars": [1, { args: "none" }], "vue/multi-word-component-names": 0, }, }, ], }; ```

<script setup lang="tsx">
import TestComp from "./TestComp.vue";
const testFunc = () => {
  return <TestComp test={1}></TestComp>;
};
</script>

What did you expect to happen?

no error

What actually happened?

throw Error Parsing error: '>' expected.eslint

when I use single .tsx file these has no error

Link to Minimal Reproducible Example

https://github.com/Cat1007/parseErrorDemo

see src/HasErrorComp.vue

Additional comments

No response

[laterdayi]

same question

[DrJume]

It seems to be always interpreted as false, if parserOptions.project is provided: https://typescript-eslint.io/packages/parser/#jsx:~:text=If%20parserOptions.project%20is%20provided,as%20if%20this%20is%20false

[FrankFang]

Any idea?

[cumt-robin]

Any idea?

这么巧，还有一小时前的，今天也遇到这个问题了

[wmelton]

This fixed the issue for me:

Eslint:

"parser": "vue-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser" },

[aolyang]

Starting in Vue 3.4, Vue no longer implicitly registers the global JSX namespace. To instruct TypeScript to use Vue's JSX type definitions

in your tsconfig.json

{
    "compilerOptions": {
        "jsx": "preserve",
        "jsxImportSource": "vue"
    }
}

Probably I think, Weather you are using Typescript (Typescript support compile js/jsx too), if you are using @typescript-eslint/parser, you can enable ecmaFeatures.jsx = true for a common fix.

// vue eslint config, this is eslint 9 flat config
const eslint9FlatConfig = [
    {
        files: ["*.vue", "**/*.vue"],
        languageOptions: {
            parser: "vue-eslint-parser",
            parserOptions: {
                parser: "@typescript-eslint/parser",
                sourceType: "module",
                ecmaFeatures: {
                    jsx: true
                }
            }
        }
    }
]

And this works for me, also in single repo and monorepo.