vue-eslint-parser: [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>

About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 23 (7 by maintainers)
Commits related to this issue
- bug fix: https://github.com/mysticatea/vue-eslint-parser/issues/45 — committed to stuartZhang/vue-eslint-parser by stuartZhang 5 years ago
- bug fix: https://github.com/mysticatea/vue-eslint-parser/issues/45 — committed to stuartZhang/vue-eslint-parser by stuartZhang 5 years ago
- bug fix: https://github.com/mysticatea/vue-eslint-parser/issues/45 — committed to stuartZhang/vue-eslint-parser by stuartZhang 5 years ago
- bug fix https://github.com/mysticatea/vue-eslint-parser/issues/45 — committed to stuartZhang/eslint-config-stzhang by stuartZhang 5 years ago
- bug fix https://github.com/mysticatea/vue-eslint-parser/issues/45 — committed to stuartZhang/eslint-config-stzhang by stuartZhang 5 years ago
- Help troubleshoot issues with multiple parsers This might not be a perfect fit for the typescript-eslint docs, since this is specific to Vue. However, I expect the issue effects other custom parsers... — committed to jfbloom22/typescript-eslint by jfbloom22 2 years ago
- docs(website): help troubleshoot issues with multiple parsers (#5612) * Help troubleshoot issues with multiple parsers This might not be a perfect fit for the typescript-eslint docs, since this is... — committed to typescript-eslint/typescript-eslint by jfbloom22 2 years ago
Most upvoted comments

+12
CHENQIKUAI on Dec 8, 2021