TS2769: No overload matches this call when building Vue 2.7 TS components using scirpt setup with webpack

[iraklisg]

Version

2.7.4

Reproduction link

github.com

Steps to reproduce

1. Clone the reproduction repo git clone https://github.com/iraklisg/mix-ts-vue-script-setup.git
2. Build the assets npm run dev

What is expected?

To compile the assets without errors

What is actually happening?

The following error occurs:

[tsl] ERROR in /home/node/app/resources/js/components/HelloWorld.vue.ts(4,3)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ __name: string; setup(this: void, __props: Readonly<Readonly<LooseRequired<{}>>>): { __sfc: boolean; }; }' is not assignable to parameter of type 'ComponentOptionsWithProps<ComponentPropsOptions<Data>, { __sfc: boolean; }, Data, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, { ...; } | {}>'.
      Object literal may only specify known properties, but '__name' does not exist in type 'ComponentOptionsWithProps<ComponentPropsOptions<Data>, { __sfc: boolean; }, Data, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, { ...; } | {}>'. Did you mean to write 'name'?

---

The assets are build using webpack (laravel-mix)

• Laravel Mix Version: 6.0.49
• Node Version: 18.1.0
• NPM Version: 8.8.0:
• OS: Linux

Using the defineComponent helper, the assets compile without errors (see commit 2e9a15bfaa6227a57b48e08bc4704dee156e8e17)

// This compiles without errors

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: "HelloWorld",
})

The error only occurs when migrating component to use <script setup>. However, the assets are actually successfully compiled.

I have also tried to use the shims from Vue 3 but without luck

declare module '*.vue' {
  import { defineComponent } from 'vue';

  export default ReturnType<typeof defineComponent>;
}

---

EDIT

As a workaround, using a normal <script> alongside <script setup> that defines a name property makes the error dissappear

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

<script lang="ts">
export default {
  name: 'HelloWorld.'
}
</script>