Next.js Discord

Discord Forum

`ReferenceError: document is not defined` when I try to build my project

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Hi dear reader,

I am using nextjs 14 and I added a few new pages to my app but right now some of them are throwing this weird error at me when I execute next build. Here are my next conf: https://github.com/kasir-barati/you-say/blob/main/apps/frontend/next.config.js

Besides that standalone build I do not see any other important thing to mention. It is really weird since not-found.tsx was working just fine but suddenly nextjs is not able to build that page too 😕. You can see entire log over here: https://github.com/kasir-barati/you-say/actions/runs/9064965915/job/24904417517. BTW I also read this article but it did not help me to figure it out: https://nextjs.org/docs/messages/prerender-error 

Error occurred prerendering page "/shop". Read more: https://nextjs.org/docs/messages/prerender-error
  
  ReferenceError: document is not defined

20 Replies

Transvaal lionOP
But when I run next dev it runs the app and I can see all the pages, no problem
Toyger
in build stage you don't have document, most likely you need to wrap your logic that require document in condition
if (document!==undefined){
//your code
}

but tbh it's strange that such code even get in build stage, so your some logic can be wrong.
Transvaal lionOP
It is only happening during build. BTW I am using nx
But what kind of logic can go wrong in this page: https://github.com/kasir-barati/you-say/blob/main/apps/frontend/src/app/shop/page.tsx

It is only 7 line of code 🫤.
Toyger
hmm, can be problem with style-loader that you have from your monorepo https://github.com/vercel/next.js/discussions/14060
Transvaal lionOP
Then it should have been the same for profile page: https://github.com/kasir-barati/you-say/blob/main/apps/frontend/src/app/profile/%5Busername%5D/page.tsx

right? I mean there I am also using MUI directly.
@Transvaal lion Then it should have been the same for profile page: <https://github.com/kasir-barati/you-say/blob/main/apps/frontend/src/app/profile/%5Busername%5D/page.tsx> right? I mean there I am also using MUI directly.
Toyger
based on error, your useFusionAuth from footer asks for document.cookie.
Is it worked earlier?
I checked docs on fusionauth site, and they suggesst use next-auth with their provider
Transvaal lionOP
I cannot see how you find out that it is because of FusionAuth, can you send a screenshot or link?

But regarding that I will check it
@Transvaal lion I cannot see how you find out that it is because of FusionAuth, can you send a screenshot or link? But regarding that I will check it
Toyger
I checked built files,
it show stack trace at .next\server\chunks\211.js:142:26284 which I checked, on screenshot.
and this variable I found in footer that connected through layout
it show me build errors on couple pages and stops it just don't reach other pages
Transvaal lionOP
I am suspecious about my recent 3rd party package upgrade. So I am gonna check that first
Transvaal lionOP
Nah, it was not that.
I am not sure about https://authjs.dev/ though, I mean come on why should I have to do it. It is gonna be a real pain in the neck
@Transvaal lion I am not using `document` to begin with. So why should I do it? I am using `'use client'` in my pages too. But it did not solve the issue.
Turkish Van
Adding 'use client' does make component a Client component but its first render still happens on server. You could try wrapping it with:
if (typeof window != undefined) {
  // Client logic, usage of document
}
Transvaal lionOP
But I am not using document directly, if i had to do that probably I then need to put my entire page inside that if.

BTW your condition is not correct == or !=?
Look at this, now my build is complaining about something else: https://github.com/vercel/next.js/discussions/43577#discussioncomment-9426885
@Transvaal lion But I am not using document directly, if i had to do that probably I then need to put my entire page inside that if. BTW your condition is not correct `==` or `!=`?
Turkish Van
It is supposed to be !=, You are right. Thank You for correcting me.

It complaining about the usage of document might be because of Your auth provider using it as someone stated above.

Did You check their docs for Next.js?
https://fusionauth.io/docs/quickstarts/quickstart-javascript-nextjs-web ^
Transvaal lionOP
I think I do not have any other choice except to chuck my intentions of not adding https://authjs.dev/ lib to my app 😢.
Transvaal lionOP
I figured it out, the issue is lied in my Notification component. I tried to isolate and reproduce the issue in a n new nextjs app in a separate Nx workspace and it seems like that. Or at least that's the first step: try to build my-new-app: https://github.com/kasir-barati/nextjs-fusionauth

npx nx build my-new-app
Transvaal lionOP
I figure out the first issue's cause; it was thanks to NODE_ENV=development inside my .env file. So I did NODE_ENV=production nx build frontend to overcome that first part. But now I am back to the original issue: document is not defined