Typescript 4.8.4 shows an error in IDE

[adin00]

Using the basic setup:

<script lang="ts" setup>
  import ConfettiExplosion from "vue-confetti-explosion";
</script>

<template>
  <ConfettiExplosion />
</template>

I get the following usage error on template: (it was working fine until today)

Type '{}' is not assignable to type 'ComponentProps'. Type '{}' is missing the following properties from type '{ props: { particleCount: { type: NumberConstructor; default: number; }; particleSize: { type: NumberConstructor; default: number; }; duration: { type: NumberConstructor; default: number; }; ... 4 more ...; shouldDestroyAfterDone: { ...; }; }; setup(props: any): { ...; }; }': props, setup ts(2322)

Relevant dependencies:

vue: 3.2.41 typescript: 4.8.4

One last thing: the project compiles correctly, the above error appears only in IDE (VS Code with Volar extension)

[imranhasanhira]

Facing same issue here. Works on browser, but yarn build fails with above mentioned error, can't do production build. Btw, the component is awesome when seen on browser :D

[eladcandroid]

Same here... Any good news?

[cesswhite]

Hi, I found the solution for this error. Just turn off TS and use JS. Here is my config:

tsconfig.json

 "compilerOptions": {
    "allowJs": true
}

Create a SFC to wrap the Confetti component and only use <script setup>

Confetti.vue

<template>
    <ConfettiExplosion />
</template>

<script setup>
import ConfettiExplosion from "vue-confetti-explosion";
</script>

and thats all, let me know if this solution work for you

[anatolykopyl]

You can use ConfettiExplosion as a dynamic component to avoid the error:

<template>
  <component :is="ConfettiExplosion"/>
</template>

<script setup lang="ts">
import ConfettiExplosion from "vue-confetti-explosion";
</script>

[mmellado]

Hi, I found the solution for this error. Just turn off TS and use JS. Here is my config:

tsconfig.json

 "compilerOptions": {
    "allowJs": true
}

Create a SFC to wrap the Confetti component and only use <script setup>

Confetti.vue

<template>
    <ConfettiExplosion />
</template>

<script setup>
import ConfettiExplosion from "vue-confetti-explosion";
</script>

and thats all, let me know if this solution work for you

The issue happens because TS is not being used to define the type of the different props, despite the setup script being used for the component having lang="ts" as part of its definition.

A patch that wouldn't require disabling typescript entirely for the project is to simply create a *.d.ts file to define the expected props as any:

vue-confetti-explosion.d.ts

declare module 'vue-confetti-explosion' {
  import { DefineComponent } from 'vue';

  const ConfettiExplosion: DefineComponent<{}, {}, any>;

  export default ConfettiExplosion;
}

Ideally, this library should be updated to use the composition API to define the component and properly use Typescript to define the prop typing with defineProps

[ZachHandley]

To anyone that sees this, I rewrote the component in Composition API https://github.com/valgeirb/vue-confetti-explosion/pull/5 - it works and is better IMO then a workaround. @mmellado

[Psycarlo]

Any news on this?

[ZachHandley]

@Psycarlo Idk if he's gonna update it, but my forked version works

[Poeschl]

If still relevant: I switched over to https://github.com/PuruVJ/neoconfetti, since its close to a 1:1 replacement, but without those typescript issues