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 });

[Zenoo]

In my case I didn't want to have to use a client component for the whole page, so I just ended up dynamically importing the AnimationLottie component in Experience and Education:

const AnimationLottie = dynamic<AnimationLottieProps>(
  () =>
    import("../../helper/animation-lottie").then((mod) => mod.AnimationLottie),
  { ssr: false },
);

And exporting AnimationLottie like this:

"use client"

import Lottie from "lottie-react";

export interface AnimationLottieProps {
  animationPath: Record<string, unknown>;
};

export const AnimationLottie = ({ animationPath }: AnimationLottieProps) => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationPath,
    style: {
      width: '95%',
    }
  };

  return (
    <Lottie {...defaultOptions} />
  );
};

[Maahdi313]

How i fixed my issue: Step 1: Separate Client-Side Components
Create a new client component to handle rendering all the dynamically imported components.
Keep page.js as a server component and delegate the rendering of the client components to a new client component (e.g., ClientHome.jsx):

Create a new file ClientHome.jsx in the app/ directory (or an appropriate folder) to handle all client-side rendering.

Result:
page.js Remains a Server Component:

This file handles server-side logic, such as fetching data (getData).
It avoids using dynamic imports with ssr: false.
Client-Side Logic is Isolated:

The new ClientHome.jsx is marked as a client component with "use client";.
This file dynamically imports all the other client-side components with ssr: false.
Avoids Conflicts with SSR:

Dynamically imported components (HeroSection, Experience, etc.) are rendered only on the client.