Open zifeo opened 9 months ago
I'm getting the same error as well on latest node version. Switching to 18.18.2 fixed it for me.
im getting this as well on node v20+
Please 'use client' in component using this library.
[Nextjs] For me, I also separate animation lottie into single component with 'use client' in the top of file:
And import this to Server component by dynamic import:
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.
This impacts more than just Next. I'm using this repo in a gatsby project am am running into the same issue.
Getting the error: ReferenceError: document is not defined
I confirm this error is gone if you dynamically import the Player component as @dzungmv suggested.
This is my solution.
// player.tsx
import dynamic from 'next/dynamic';
export const ReactLottiePlayer = dynamic(
async () => {
const ReactLottie = await import('@lottiefiles/react-lottie-player');
return ReactLottie.Player;
},
{ ssr: false }
);
// page.tsx
'use client';
import { ReactLottiePlayer } from '@/lib/lottiefiles/player';
export function Page() {
return (
<ReactLottiePlayer
src="/animation.json"
speed={1}
loop
autoplay
/>
);
}
Tested in Next.js v14.x
My Project was complex so dynamic import was not feasible solution. It works fine on node v18
though
Overview
Using NextJS, we got:
This has been reported as a potential bug related to the node version: https://github.com/Gamote/lottie-react/issues/101.
Consuming repo
Labels
Type: Bug
label to this issue.