Lottie SSR issue in BentoGrid

[KayvanShah1]

Tried dynamic loading with useEffect Hook

⨯ ReferenceError: document is not defined
    at __webpack_require__ (C:\Users\shahk\OneDrive\Projects K1\Personal\portfolio\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\shahk\OneDrive\Projects K1\Personal\portfolio\.next\server\webpack-runtime.js:33:43)
    at eval (./components/ui/bento-grid.tsx:13:70)
    at (ssr)/./components/ui/bento-grid.tsx (C:\Users\shahk\OneDrive\Projects K1\Personal\portfolio\.next\server\app\page.js:206:1)
    at Object.__webpack_require__ [as require] (C:\Users\shahk\OneDrive\Projects K1\Personal\portfolio\.next\server\webpack-runtime.js:33:43)
digest: "1091135423"
 GET / 500 in 697ms

[muhammadashhadgit]

Same problem

[33929978]

Did anyone find a fix? I am experiencing the same issue.

[KayvanShah1]

Did anyone find a fix? I am experiencing the same issue.

One possible solution is to downgrade the node to 20.x and reinstall node modules

[Sia-WRWD]

The reason this issue is popping up is because of NextJS Server-Side Rendering (SSR) nature, while Lottie utilizes the window object which is not available during SSR, causing the build to fail.

To fix the issue, simply change the code in BentoGrid.tsx for the importing of the lottie library:

import dynamic from 'next/dynamic';

const Lottie = dynamic(() => import('react-lottie'), { ssr: false });

Credits to: Dragos UniqQum

Edit-1: I noticed that using this method will lead to a forEach error, therefore, to resolve that error, try using an alternative library in the name of react-lottie-player which has almost similar options with minor modifications required.

Code with modifications:

import dynamic from 'next/dynamic';

const Lottie = dynamic(() => import('react-lottie-player'), { ssr: false });

<div className={`absolute -bottom-5 right-[5.75rem]`}>
    <Lottie 
        loop={false}
        animationData={animationData}
        play={copied}
        rendererSettings={{
            preserveAspectRatio: 'xMidYMid slice'
        }}
        style={{ height: 300, width: 200 }}
    />
</div>