Closed evgenii-code closed 5 months ago
Appears to be caused by #3350
It looks like with the Options API, local properties can not override global or local components unlike with script setup
where local variables override global components.
In a script setup
with a global HeaderTest
component and a local variable HeaderTest
, the local variable overrides global component:
<script setup lang="ts">
import { defineComponent } from 'vue';
const HeaderTest = defineComponent({ render() { return 'yyy'}})
</script>
<template>
<HeaderTest />
</template>
(Renders 'yyy')
With the Options API, even local components
definition doesn't override global component:
<template>
<HeaderTest />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
const HeaderTest = defineComponent({ render() { return 'yyy'}})
export default defineComponent({
components: {
HeaderTest
},
})
</script>
(Renders contents of the global HeaderTest
component.)
So perhaps the logic introduced in https://github.com/vuejs/language-tools/pull/3350 needs to consider the script type and apply different logic there. If that is even possible (not sure if it's possible to distinguish those cases).
I seem to be encountering a similar issue now as of the 1.8.12 release when using the Options API.
Release 1.8.11 and prior seem to work fine for me.
I believe the issue may be related to this PR: https://github.com/vuejs/language-tools/pull/3565/files
As enabling strictTemplates within my tsconfig.json seems to remove these errors.
@Sn0wCrack Could you please provide a minimal reproduction then open a new issue?
I'll try and see if I can replicate the specific issue and provide you with some code for it, currently trying narrow down what specific cause of it and am having trouble actually replicating it in a fresh project.
I've attached the exact output I receive of vue-tsc and my related tsconfig.json files: vue-tsc-issue.zip
When I place some of these components that produce this error into similarly setup projects (same dependencies, typescript version and vue-tsc version), I don't end up receiving these errors from vue-tsc, so my assumption is this is related to some kind of configuration difference.
I'll keep trying on my end to replicate and see what I come up with.
If it makes any difference, this is a Laravel project using Inertia.js and is compiled using Vite.
Also just ran into this myself when updating vue-tsc to 1.8.15, on a custom component and RouterLink. Couldn't turn on strictTemplates (didn't like data-testid attributes), but downgrading to 1.8.11 did the trick.
Also just ran into this myself when updating vue-tsc to 1.8.15, on a custom component and RouterLink. Couldn't turn on strictTemplates (didn't like data-testid attributes), but downgrading to 1.8.11 did the trick.
I have the same problem with data-testid from Cypress after turning strictTemplates, but you can add dataAttributes: ["data-testid"] under vueCompilerOptions in tsconfig.json to fix the error.
@Sn0wCrack Could you please provide a minimal reproduction then open a new issue?
Very strangely enough I can also not reproduce this issue on a fres project. But it's still present on 1.8.27 (and fixed by turning on strictTemplates)
Closed due to unable to reproduce in latest version.
After updating Volar to version v1.8.4, I got an error related to the interferency of property and component names.
Image of the error
![image](https://github.com/vuejs/language-tools/assets/56561823/055f3060-a928-44b0-af7a-a8f618cb2bd6)This happens when I use the property name almost the same as the component name. despite the casing
Code of the components:
Parent
```Child
```Versions: node v16.17.1 vue 2.7.10 nuxt 2.15.8 volar v1.8.4 - error volar v1.8.3 - without error
Minimal repo https://github.com/evgenii-code/volar-test/tree/naming-conflict