unable to use it with next 14

herrethan / react-confetti-explosion

A lightweight css-animation based confetti exploder for React

MIT License

210 stars 19 forks source link

unable to use it with next 14 #22

Open statusunknown418 opened 12 months ago

statusunknown418 commented 12 months ago

for some reason it won't compile :(

cheraff commented 11 months ago

same

claide commented 11 months ago

Mine is shouting

Warning: [JSS] SheetsManager: can't find sheet to manage at ConfettiExplosion.

jonnicholson94 commented 8 months ago

Same here - package is currently unusable on Next.js 14. Seems like it's related to SSR, as when you mark it as use client it throws a server-client mismatch.

currenthandle commented 8 months ago

Any updates on this situation? I am seeing the same issue.

zilahir commented 8 months ago

though i haven't tried this, by default next 14 components are SSR unless 'use client' is specified in a client component.

i am only assuming marking the component as a client component by adding

use client

on the top of the your component implementation might solve this problem.

jonnicholson94 commented 8 months ago

though i haven't tried this, by default next 14 components are SSR unless 'use client' is specified in a client component.

i am only assuming marking the component as a client component by adding
use client
on the top of the your component implementation might solve this problem.

No this isn't it - as I noted above, it throws a server / client mismatch if you mark it with use client.

I can probably investigate it and push a fix myself, if the owner's happy for me to do it.

rajyavardhanbithale commented 3 months ago

though i haven't tried this, by default next 14 components are SSR unless 'use client' is specified in a client component. i am only assuming marking the component as a client component by adding
use client
on the top of the your component implementation might solve this problem.
No this isn't it - as I noted above, it throws a server / client mismatch if you mark it with use client.

I can probably investigate it and push a fix myself, if the owner's happy for me to do it.

Dynamically importing the package with ssr:false resolves the server/client mismatch issue: const ConfettiExplosion = dynamic(() => import("react-confetti-explosion"), { ssr: false });

However, there is still a warning: Warning: [JSS] SheetsManager: can't find sheet to manage, and it doesn't work at all.