[TSX - Parsing Error: '>' expected] in conjunction with @typescript-eslint/parser

Only if the TSX fragments are inside the *.vue file, the TSX parsing error always happens.

Provided the TSX fragments are absorbed into a single *.tsx file which is referenced in the vue file, everything is good.

My .eslintrc.js file is as such:

module.exports = {
    parserOptions: {
        parser: '@typescript-eslint/parser',
        project: './tsconfig.json',
        tsconfigRootDir: './',
        ecmaFeatures: {
          jsx: true
        }
    },
    parser: 'vue-eslint-parser',
};

My tsconfig.jons is as below:

 {    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "checkJs": false,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "jsxFactory": "h",
        "lib": [
            "es5",
            "es6",
            "es2015",
            "es7",
            "es2016",
            "es2017",
            "es2018",
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost",
            "es2015.core",
            "es2015.collection",
            "es2015.generator",
            "es2015.iterable",
            "es2015.promise",
            "es2015.proxy",
            "es2015.reflect",
            "es2015.symbol",
            "es2015.symbol.wellknown",
            "es2016.array.include",
            "es2017.object",
            "es2017.intl",
            "es2017.sharedmemory",
            "es2017.string",
            "es2017.typedarrays",
            "es2018.intl",
            "es2018.promise",
            "es2018.regexp",
            "esnext.asynciterable",
            "esnext.array",
            "esnext.intl",
            "esnext.symbol"
        ],
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "noImplicitAny": false,
        "paths": {
            "@/*": ["src/*"]
        },
        "skipLibCheck": false,
        "sourceMap": true,
        "strict": true,
        "strictNullChecks": true,
        "strictPropertyInitialization": true,
        "target": "esnext"
    },
    "include": [
        "node_modules/mx-general.macros/types/*.d.ts",
        "node_modules/log2indexeddb/types/*.d.ts",
        "types/*.d.ts",
        "src/**/*.vue",
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.js",
        "src/**/*.jsx"
    ]
}

My vue file is as follows:

<template>
    <div>
        <tree ref="domainTree" class="tree" :data="domains" :render="renderTreeNode" />
    </div>
</template>
<script lang="tsx">

import pcLog from 'mx-general.macros/dist/log-sync.macro';
import {mapState} from 'vuex';
import icon from '../assets/images/favicon.ico';
export default {
    name: 'IViewDemo',
    data(){
        return {};
    },
    computed: {
        ...mapState(['domains']),
        renderTreeNode(){
            const domainId = 0;
            const render: iView2.TreeRender = (h, {data}) => {
                let clazz = 'ivu-tree-title';
                if (data.id === domainId) {
                    clazz += ' ivu-tree-title-selected';
                }
                const onClick = () => {
                    if (data.disabled) {
                        return;
                    }
                    (this.$refs.domainTree as iView2.Tree).handleSelect(data.nodeKey);
                    if (data.id !== domainId) {
                        pcLog.warn(`选中：${data.name}`);
                        alertAsync(`选中：${data.name}`);
                    }
                };
                if (data.leaf) {
                    return <span class={clazz} onClick={onClick}><img src={icon} /> {data.name}</span>; // Parsing error: '>' expected
                }
                return <span class={clazz} onClick={onClick}>{data.name}</span>;
            }
            return render;
        }
    },
    mounted(){
        this.$store.dispatch('getDomainIds');
    }
};

</script>
<style scoped>
.tree >>> .ivu-tree-title > img {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}
</style>

[CHENQIKUAI]

[EliazTray]

https://eslint.vuejs.org/user-guide/#using-jsx