ReferenceError: document is not defined

[shut frigate]

When I try to build the project, it throws me this error, can someone help me out?

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✓ Linting and checking validity of types
✓ Collecting page data
Generating static pages (0/4) [= ]ReferenceError: document is not defined
at createTag (/Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:61665)
at /Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:74553
at /Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:74676
at /Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:77501
at /Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:61330
at 496 (/Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:61334)
at t (/Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/webpack-runtime.js:1:128)
at 8924 (/Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:1:390393)
at t (/Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/webpack-runtime.js:1:128)
at 5815 (/Users/peter/Projects/peter-projects/github/portfolio/portfolio/.next/server/app/page.js:34:3043) {
digest: '2871518008'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined

[scarlet violet]

bump, i got the similar issue and still unable to fix it https://discord.com/channels/710138849350647871/1254033095229968454

[scarlet violet]

i managed to fix it, it was due to some random error from Lottie, im on node v21 and apparently they fixed it in v18 but not for me ig so i had to import it using

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

idk if you're facing the same issue but it could also be due to not using 'use client' in one of your scripts

[quick stratus]

Thank you, sir. You saved me.

[autumn palm]

Did you delete the original import Lottie from 'react-lottie'; in the BentoGrid.tsx file? When I pasted import dynamic from 'next/dynamic'; const Lottie = dynamic(() => import('react-lottie'), { ssr: false }); into the BentoGrid.tsx file and deleted import Lottie from 'react-lottie, I get a TypeError: eventListeners is undefined.

[autumn palm]

I switched back to using import Lottie from 'react-lottie'. The site will display but I still get the document is not defined error.
I downloaded the creators repo to compare the files and I noticed he called the utils folder 'lib', however in the video he called it the utils folder. Is there a reason for the change?

[whole tendon]

delete "import Lottie from 'react-lottie'"

add before export .... -> import dynamic from "next/dynamic";
const Lottie = dynamic(() => import("react-lottie"), { ssr: false });

I've Typerror: Cannot read properties of undefined

[whole tendon]

fixed by going back to node 18 -> nvm use 18

[tribal shale]

did you still have in the code?

mport dynamic from "next/dynamic";
const Lottie = dynamic(() => import("react-lottie"), { ssr: false });