I got this error can someone solve it??
KITTU223 opened this issue · 3 comments
ReferenceError: document is not defined
at webpack_require (/Users/krutarthchauhan/Desktop/Development/portfolio/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/krutarthchauhan/Desktop/Development/portfolio/.next/server/webpack-runtime.js:33:43)
at eval (./components/ui/BentoGrid.tsx:11:70)
at (ssr)/./components/ui/BentoGrid.tsx (/Users/krutarthchauhan/Desktop/Development/portfolio/.next/server/app/page.js:560:1)
at Object.webpack_require [as require] (/Users/krutarthchauhan/Desktop/Development/portfolio/.next/server/webpack-runtime.js:33:43)
digest: "1268299719"
GET / 500 in 205ms
I had the same error which made it impossible to build the website. For me it was caused by lottie.
What i did was
- Dynamically Import for Lottie: Ensures that Lottie is only loaded on the client side.
- Added Client-Side Checks: Ensures that animations and browser-specific APIs are only accessed on the client side using the isClient state.
Paste that into your BentoGrid and see if it helps.
"use client";
import { useState, useEffect } from "react";
import { IoCopyOutline } from "react-icons/io5";
import dynamic from "next/dynamic";
import { cn } from "@/lib/utils";
import { BackgroundGradientAnimation } from "./GradientBg";
import GridGlobe from "./GridGlobe";
import animationData from "@/data/confetti.json";
import MagicButton from "../MagicButton";
// Dynamically import Lottie to ensure it's only used on the client side
const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"grid grid-cols-1 md:grid-cols-6 lg:grid-cols-5 md:grid-row-7 gap-4 lg:gap-8 mx-auto",
className
)}
>
{children}
</div>
);
};
export const BentoGridItem = ({
className,
id,
title,
description,
img,
imgClassName,
titleClassName,
spareImg,
}: {
className?: string;
id: number;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
img?: string;
imgClassName?: string;
titleClassName?: string;
spareImg?: string;
}) => {
const leftLists = ["ReactJS", "Express", "Typescript"];
const rightLists = ["VueJS", "NuxtJS", "GraphQL"];
const [copied, setCopied] = useState(false);
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
const handleCopy = () => {
if (isClient) {
const text = "hsu@jsmastery.pro";
navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 3000); // Reset copied state after 3 seconds
}
};
return (
<div
className={cn(
"row-span-1 relative overflow-hidden rounded-3xl border border-white/[0.1] group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none justify-between flex flex-col space-y-4",
className
)}
style={{
background: "rgb(4,7,29)",
backgroundColor:
"linear-gradient(90deg, rgba(4,7,29,1) 0%, rgba(12,14,35,1) 100%)",
}}
>
<div className={`${id === 6 && "flex justify-center"} h-full`}>
<div className="w-full h-full absolute">
{img && (
<img
src={img}
alt={img}
className={cn(imgClassName, "object-cover object-center ")}
/>
)}
</div>
<div
className={`absolute right-0 -bottom-5 ${
id === 5 && "w-full opacity-80"
} `}
>
{spareImg && (
<img
src={spareImg}
alt={spareImg}
className="object-cover object-center w-full h-full"
/>
)}
</div>
{id === 6 && (
<BackgroundGradientAnimation>
<div className="absolute z-50 inset-0 flex items-center justify-center text-white font-bold px-4 pointer-events-none text-3xl text-center md:text-4xl lg:text-7xl"></div>
</BackgroundGradientAnimation>
)}
<div
className={cn(
titleClassName,
"group-hover/bento:translate-x-2 transition duration-200 relative md:h-full min-h-40 flex flex-col px-5 p-5 lg:p-10"
)}
>
<div className="font-sans font-extralight md:max-w-32 md:text-xs lg:text-base text-sm text-[#C1C2D3] z-10">
{description}
</div>
<div className={`font-sans text-lg lg:text-3xl max-w-96 font-bold z-10`}>
{title}
</div>
{id === 2 && <GridGlobe />}
{id === 3 && (
<div className="flex gap-1 lg:gap-5 w-fit absolute -right-3 lg:-right-2">
<div className="flex flex-col gap-3 md:gap-3 lg:gap-8">
{leftLists.map((item, i) => (
<span
key={i}
className="lg:py-4 lg:px-3 py-2 px-3 text-xs lg:text-base opacity-50 lg:opacity-100 rounded-lg text-center bg-[#10132E]"
>
{item}
</span>
))}
<span className="lg:py-4 lg:px-3 py-4 px-3 rounded-lg text-center bg-[#10132E]"></span>
</div>
<div className="flex flex-col gap-3 md:gap-3 lg:gap-8">
<span className="lg:py-4 lg:px-3 py-4 px-3 rounded-lg text-center bg-[#10132E]"></span>
{rightLists.map((item, i) => (
<span
key={i}
className="lg:py-4 lg:px-3 py-2 px-3 text-xs lg:text-base opacity-50 lg:opacity-100 rounded-lg text-center bg-[#10132E]"
>
{item}
</span>
))}
</div>
</div>
)}
{id === 6 && (
<div className="mt-5 relative">
<div
className={`absolute -bottom-5 right-0 ${
copied ? "block" : "block"
}`}
>
{isClient && (
<Lottie animationData={animationData} loop={copied} autoplay={copied} style={{ height: 200, width: 400 }} />
)}
</div>
<MagicButton
title={copied ? "Email is Copied!" : "Copy my email address"}
icon={<IoCopyOutline />}
position="left"
handleClick={handleCopy}
otherClasses="!bg-[#161A31]"
/>
</div>
)}
</div>
</div>
</div>
);
};thank you bro <3
Hi,
With the current approach of using a dynamic import for Lottie, running npm run dev results in an error. I have fixed this issue and created a pull request. You can check it out (#14).
This fix ensures that Lottie is imported correctly in both development and production environments without causing build errors.
Thanks!