Types of parameters 'confetti' and 'confetti' are incompatible.

[claide]

Hello, I suddenly got this error when I run build. I use the ff:

"react-canvas-confetti": "^1.4.0",
"@types/canvas-confetti": "^1.6.0",

Type error: Type '(confetti: confetti.CreateTypes | null) => void' is not assignable to type '(confetti: import("/Users/francis/web/sample/node_modules/react-canvas-confetti/node_modules/@types/canvas-confetti/index").CreateTypes | null) => void'.

This is the component

import { CreateTypes } from 'canvas-confetti'
import { useCallback, useEffect, useRef } from 'react'
import ReactCanvasConfetti from 'react-canvas-confetti'

interface ConfettiProps {}

const Confetti: React.FC<ConfettiProps> = () => {
  const refAnimationInstance = useRef<CreateTypes | null>(null)

  const getInstance = useCallback((confetti: CreateTypes | null) => {
    refAnimationInstance.current = confetti
  }, [])

  const makeShot = useCallback((particleRatio: number, opts: any) => {
    refAnimationInstance.current &&
      refAnimationInstance.current({
        ...opts,
        origin: { y: 0.7 },
        particleCount: Math.floor(200 * particleRatio),
      })
  }, [])

  useEffect(() => {
    const fire = () => {
      makeShot(0.25, {
        spread: 26,
        startVelocity: 55,
      })

      makeShot(0.2, {
        spread: 60,
      })

      makeShot(0.35, {
        spread: 100,
        decay: 0.91,
        scalar: 0.8,
      })

      makeShot(0.1, {
        spread: 120,
        startVelocity: 25,
        decay: 0.92,
        scalar: 1.2,
      })

      makeShot(0.1, {
        spread: 120,
        startVelocity: 45,
      })
    }

    fire()
  }, [makeShot])

  return (
    <ReactCanvasConfetti
      refConfetti={getInstance}
      style={{
        position: 'fixed',
        pointerEvents: 'none',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
      }}
    />
  )
}

export default Confetti

[ulitcos]

Hi @claide!

You use the outdated version of the module. You need to upgrade to 2.0.7, then you can use preset. This should fix the problem and your code will become much simpler. You can see an example here - https://codepen.io/ulitcos/pen/zYbbPXB