Linting TSX in Vue SFC file throw error

[Cat1007]

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?

8.22.0

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

• [email protected]
• [email protected]

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.