Argument of type '{}' is not assignable to parameter of type 'never' | Interferency of property and component names

[evgenii-code]

After updating Volar to version v1.8.4, I got an error related to the interferency of property and component names.

Argument of type '{ class: string; }' is not assignable to parameter of type 'never'

Image of the error

This happens when I use the property name almost the same as the component name. despite the casing

Code of the components:

Parent

<template>
  <div>
    <foo-bar class="class" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import FooBar from '~/components/FooBar.vue'

export default defineComponent({
  name: 'SameComponent',

  components: {
    FooBar,
  },

  props: {
    fooBar: { // Almost the same name as component's name
      type: Boolean,
      default: false,
    },
  },
})
</script>

Child

<template>
  <div>Foo Bar</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'FooBar',
})
</script>

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

[rchl]

Appears to be caused by #3350

[rchl]

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 #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).

[Sn0wCrack]

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.

[so1ve]

@Sn0wCrack Could you please provide a minimal reproduction then open a new issue?

[Sn0wCrack]

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.

[IGx89]

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.

[gnut-neygun]

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.

[gnut-neygun]

@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)

[johnsoncodehk]

Closed due to unable to reproduce in latest version.