Open
Description
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest version of the packages.
- I have searched for related issues and found none that matched my issue.
- I have read the FAQ and my problem is not listed.
Issue Description
When having multiple components assign props to the same local variable name, something gets mixed up.
It seems that @typescript-eslint will always use the props of the first component (alphabetical order).
Please take a look at this example:
ComponentOne.vue:
<script setup lang="ts">
// no problems in this file
const props = defineProps<{
a: boolean;
b: string
}>();
if (props.a) {
console.log(`${props.b.replace('find', 'replace')}`)
}
</script>
ComponentTwo.vue:
<script setup lang="ts">
const props = defineProps<{
c: boolean;
d: string;
}>();
// triggers @typescript-eslint/strict-boolean-expressions
if (props.c) {
// triggers @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
console.log(`${props.d.replace('find', 'replace')}`)
}
</script>
When trying to log props.a or props.b in ComponentTwo.vue, I get not eslint errors (but this could obviously never actually run). When I rename one of the props variable names, I get no errors as well.
Found a related issue here: #4865
Reproduction Repository Link
https://github.com/alexkramer98/vue-props-eslint-repro
Repro Steps
- clone the repo
yarn installyarn lint
Versions
| package | version |
|---|---|
@typescript-eslint/eslint-plugin |
5.48.1 |
@typescript-eslint/parser |
5.48.1 |
TypeScript |
4.9.4 |
ESLint |
8.31.0 |
node |
16.15.1 |
vue |
3.2.45 |