React 19: 'ConfettiBoom' cannot be used as a JSX component

[joshuajung]

In React 19, using the ConfettiBoom component (great work btw.!) triggers a TypeScript error:

error TS2786: 'ConfettiBoom' cannot be used as a JSX component.
  Its type '(props: Props) => Element' is not a valid JSX element type.
    Type '(props: Props) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

To reproduce, simply set up a project using React 19 and add the above component. Everything was working fine in React 18.

[almond-bongbong]

Thanks for reporting this issue and providing such a clear explanation.
I really appreciate your prompt feedback, and I’ll work on a fix as soon as possible.

[nickatnight]

Any update on this?

[nickatnight]

Any update on this?

Ended up just using Lottie animations

[almond-bongbong]

I apologize for the delayed response. Please try version 2.0.1 which includes fixes for React 19 compatibility. If you still encounter the same issue, please let me know anytime.

[joshuajung]

Thank you, @almond-bongbong! I cannot test this right now as our project remains on React 18 for other uncompatible libraries, so if you think this is solved, please feel free to close the issue.

[senkwe]

I can confirm that version 2.0.1 doesn't fix this issue.

[Alexg10]

It's working on my local but not in production...

[Shamoil009]

I'm using React 19.1.1 with React Router v7 framework mode, and it is working fine on local and production.