Next.js Discord

Discord Forum

facing an issue when I building my next app

Unanswered
Atlantic cod posted this in #help-forum
Open in Discord
Atlantic codOP
Hi there I am facing an issue when I building my next app
This is the error it is showing how to fix it?

45 Replies

@Atlantic cod Hi there I am facing an issue when I building my next app This is the error it is showing how to fix it?
B33fb0n3
on your page /, check where you used document. Then check if the specific component is rendered server side. If so, add a use client on top. If that does not help, import it without SSR like:
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
B33fb0n3
@Atlantic codsolved?
Atlantic codOP
nope
Usman
Can you share the code of your page.tsx?
@Atlantic cod
American Curl
You have to check if the document is undefined when you are trying to use it, as it will be renderred in server side once when you build it.
This is how I fix it for the localStorage.
@Atlantic cod nope
B33fb0n3
then, can you share what you are missing? That would help us to help you.
@Usman Can you share the code of your `page.tsx`? <@740138542616936508>
Atlantic codOP
"use client";

import { navItems } from "@/data";

import Hero from "@/components/Hero";
import Grid from "@/components/Grid";
import Footer from "@/components/Footer";
// import Clients from "@/components/Clients";
import Approach from "@/components/Approach";
import Experience from "@/components/Experience";
import RecentProjects from "@/components/RecentProjects";
import { FloatingNav } from "@/components/ui/FloatingNavbar";

const Home = () => {
  return (
    <main className="relative bg-black-100 flex justify-center items-center flex-col overflow-hidden mx-auto sm:px-10 px-5">
      <div className="max-w-7xl w-full">
        <FloatingNav navItems={navItems} />
        <Hero />
        <Grid />
        <RecentProjects />
        {/* <Clients /> */}
        <Experience />
        <Approach />
        <Footer />
      </div>
    </main>
  );
};

export default Home;
Atlantic codOP
i haven't used 
document
anywhere
@Atlantic cod i haven't used document anywhere
B33fb0n3
looks like you used it somewhere (see attached the red line). Are you able to provide more info about createTag?
@B33fb0n3 looks like you used it somewhere (see attached the red line). Are you able to provide more info about createTag?
Atlantic codOP
its inside the next directory with next.js creates automatically..
Usman
@Atlantic cod It's possible that one of your components might be using document
Could be possible a library you're using might be the culprit
@Atlantic cod its inside the next directory with next.js creates automatically..
B33fb0n3
next tried to create it based on your code. Next wasn't able to create the specific page, because it can't reference the document. So Next throws a ReferenceError (the error, that you encounter).
this entire page is a client component I just realized
but document is being used somewhere inside.
as i said it could be a component directly using document or could be a library
@Atlantic cod its inside the next directory with next.js creates automatically..
B33fb0n3
I just checked your code and found the magic lines with document
1. https://github.com/adrianhajdin/portfolio/blob/321a712f10a0b71145a20cd0447690cce787aced/components/ui/GradientBg.tsx#L43
2. https://github.com/adrianhajdin/portfolio/blob/321a712f10a0b71145a20cd0447690cce787aced/components/ui/GradientBg.tsx#L47

Now we come back to my [initial message](https://nextjs-forum.com/post/1264895862790951035#message-1264899174705401898):
on your page /, check where you used document.
found it now.

Then check if the specific component is rendered server side.
nope, you added use client at the top. So not serverside rendered

If so, add a use client on top.
isn't serverside rendered

## And that might be the solution to your problem
If that does not help, import it without SSR like:
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

So correct the import of your [BackgroundGradientAnimation](https://github.com/adrianhajdin/portfolio/blob/main/components/ui/BentoGrid.tsx#L10) now, to solve your issue like I mentioned.
@Usman but `document` is being used somewhere inside. as i said it could be a component directly using `document` or could be a library
Atlantic codOP
this is where I am using document
Usman
Replace the useEffect with this

useEffect(() => {
  if (typeof window !== "undefined") {
    document.body.style.setProperty(
      "--gradient-background-start",
      gradientBackgroundStart,
    );
    document.body.style.setProperty(
      "--gradient-background-end",
      gradientBackgroundEnd,
    );
    document.body.style.setProperty("--first-color", firstColor);
    document.body.style.setProperty("--second-color", secondColor);
    document.body.style.setProperty("--third-color", thirdColor);
    document.body.style.setProperty("--fourth-color", fourthColor);
    document.body.style.setProperty("--fifth-color", fifthColor);
    document.body.style.setProperty("--pointer-color", pointerColor);
    document.body.style.setProperty("--size", size);
    document.body.style.setProperty("--blending-value", blendingValue);

    setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
  }
}, []);
Try with this @Atlantic cod
If this also does not work,
@Usman If this also does not work,
Atlantic codOP
nah
throwing the same error ...
@Atlantic cod nah
B33fb0n3
have you tried [this](https://nextjs-forum.com/post/1264895862790951035#message-1265641000043417712) (this message links to a specific message in this thread)?

If yes, what's the result?
If no, try it.
Usman
import the BackgroundGradientAnimation like this wherever you're importing it

// in some other file, instead of import { BackgroundGradientAnimation } from './components/BackgroundGradientAnimation'
import dynamic from 'next/dynamic'

const BackgroundGradientAnimation = dynamic(() => import('./components/BackgroundGradientAnimation'), {
  ssr: false
})
yeah this solution by @B33fb0n3 is going to work
Atlantic codOP
page 
/
means?
@Atlantic cod page / means?
Usman
page / means the home page
the first page.tsx file inside app directory
@Usman the first page.tsx file inside app directory
Atlantic codOP
use client is there in that page
@Atlantic cod use client is there in that page
Usman
use client is not the culprit, document usage is
@Atlantic cod where I should do it ?
Usman
where are you importing BackgroundGradientAnimation
just replace the import statement with this
basically, when your site is built, it renders everythign on the server first with SSR.
document is not available but still it tries and fails
@Atlantic cod where I should do it ?
B33fb0n3
can you please follow the message? https://nextjs-forum.com/post/1264895862790951035#message-1265641000043417712
I linked you the direct line
Usman
So you simply skip or disable ssr for this particular component
@Atlantic cod on my page `/` I haven't used `document` anywhere 2. In every imported component `use client` is there..
B33fb0n3
All the best with your issue, I guess I can't help you more than this, sorry