TS2769: No overload matches this call when building Vue 2.7 TS components using scirpt setup with webpack #12637
Description
Version
2.7.4
Reproduction link
Steps to reproduce
- Clone the reproduction repo
git clone https://github.com/iraklisg/mix-ts-vue-script-setup.git - 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>