component type error

[HodgeWen]

BUG report

When <script lang="ts" setup> and normal <script lang="ts"> are used together. it's report:
Type '{}' is not assignable to type 'ComponentProps<() => ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<......'.

<!-- ComponentWithMultipleRoots -->
<template>
  <div></div>
  <div></div>
</template>

<script lang="ts" setup>
//...
</script>

<script lang="ts">
export default {
   inheritAttrs: false
}
</script>

<template>
  <ComponentWithMultipleRoots />
</template>

ENV

Typescript version: 4.8.4
vite version: 3.1.7
volar version: 1.0.5
vscode version: 1.72
os: 5.17.15-1-MANJARO(x64)

[appleaway]

回滚volar到1.0.3版本等待解决吧

[jahnli]

the same problem

[DevilTea]

Here is a reproduction repo

when open the App.vue file with vscode,
the component props error message would show like below

when the component has both <script setup> and <script> with export default defineComponent({}) existed

[tanghaojie]

same error

[HodgeWen]

回滚volar到1.0.3版本等待解决吧

回滚有效, 不过最近volar似乎不是很稳定.

[kyumoon]

+1

[JoostKersjes]

Same here, all my components components with inheritAttrs: false are throwing this error.

[Fuphoenixes]

回滚volar到1.0.3版本等待解决吧

回滚有效, 不过最近volar似乎不是很稳定.

+1

[MrCube42]

In my case, these errors appear when calling methods defined via options API, e.g. this.myMethod(). I could workaround this in some cases by changing data() { ... to data: () =>. In this case, the type is correctly inferred. However, when I want to access the props in data and I need to change to data: (vm) => vm.myProp the inference is also broken.

Side note: The same errors appear also when building with vue-cli as soon as I switch from vue 2.7.10 to 2.7.11. As long as I stay on 2.7.10 this is only an IDE problem with Volar (vuejs/vue#8721 (comment)).

[vis97c]

Was this really fixed? I'm getting: type {name: string} is not assignable to type ComponentProps when working with transition components.

[MrCube42]

Problem (#1996 (comment)) still applies for me even after "fix" with 1.0.6.

[dxps]

Same case here (the issue still exists): using Volar v1.0.9 (with takeover mode enabled, ofc) and this example.

It compiles and runs fine, it's just complaining about this:

Type '{ width: string; }' is not assignable to type 'ComponentProps<string>'.
  Type '{ width: string; }' is not assignable to type 'string'.ts(2322)

[Andrii-Khoptii]

The issue is still open

Volar ts: 1.2.0
Volar 1.2.0
Vite: 3.2.4

[hkochniss]

@johnsoncodehk this creates massive type errors in vue-tsc 1.3.10, somehow VS Code Volar 1.3.14 doesn't show the errors though. We can't basically use vue-tsc right now, as it emits too many wrong errors, along the lines of (for a component with a simple 'id' prop) showing (only in vue.tsc, not VS Code)

Argument of type '{ id: string; }' is not assignable to parameter of type '{ ref?: VNodeRef | undefined; key?: string | number | symbol | undefined; ref_for?: boolean | undefined; ref_key?: string | undefined; onVnodeBeforeMount?: VNodeMountHook | VNodeMountHook[] | undefined;