node_modules\lottie-web\build\player\lottie.js (30:0) @ createTag ⨯ ReferenceError: document is not defined

[xaviernishanth]

[email protected] dev
next dev

▲ Next.js 14.1.3

• Local: http://localhost:3000
• Environments: .env

✓ Ready in 4.3s
○ Compiling / ...
✓ Compiled / in 12.7s (1100 modules)
⨯ node_modules\lottie-web\build\player\lottie.js (30:0) @ createTag
⨯ ReferenceError: document is not defined
at webpack_require (C:\Users\NIshanth\Desktop\New folder\portfolio.next\server\webpack-runtime.js:33:43)
at webpack_require (C:\Users\NIshanth\Desktop\New folder\portfolio.next\server\webpack-runtime.js:33:43)
at eval (./app/components/helper/animation-lottie.jsx:7:70)
at (ssr)/./app/components/helper/animation-lottie.jsx (C:\Users\NIshanth\Desktop\New folder\portfolio.next\server\app\page.js:272:1)
at webpack_require (C:\Users\NIshanth\Desktop\New folder\portfolio.next\server\webpack-runtime.js:33:43)
null
✓ Compiled in 2.3s (447 modules)
○ Compiling /favicon.ico ...
✓ Compiled /favicon.ico in 844ms (682 modules)

[itsluap]

What is the fix for this?

[itsluap]

nvm i figured out what was happening. the components need to be imported dynamically in page.js:

import dynamic from 'next/dynamic';
import { personalData } from "@/utils/data/personal-data";

// Dynamically import all components with SSR: false to avoid rendering them during SSR
const HeroSection = dynamic(() => import("./components/homepage/hero-section"), { ssr: false });
const AboutSection = dynamic(() => import("./components/homepage/about"), { ssr: false });
const Experience = dynamic(() => import("./components/homepage/experience"), { ssr: false });
const Skills = dynamic(() => import("./components/homepage/skills"), { ssr: false });
const Projects = dynamic(() => import("./components/homepage/projects"), { ssr: false });
const Education = dynamic(() => import("./components/homepage/education"), { ssr: false });
const ContactSection = dynamic(() => import("./components/homepage/contact"), { ssr: false });