Yarn build fails with "window is not defined" inside NextJS generating static pages
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
I need support ASAP! Other posters after me seem to be supported first.
I've been working from a paid Materio template and its stock builds fine without incident. But in my mvp project that I moved it to after a month, now getting this build error locally and vercel. See attached log. The build oddly seems to complain (randomly) about three pages: /401, /acl and /500 which are tsx files in src/pages folder which I have not modified. I'm blocked, thanks!
I've been working from a paid Materio template and its stock builds fine without incident. But in my mvp project that I moved it to after a month, now getting this build error locally and vercel. See attached log. The build oddly seems to complain (randomly) about three pages: /401, /acl and /500 which are tsx files in src/pages folder which I have not modified. I'm blocked, thanks!
6 Replies
Asian black bearOP
This is the Vercel build output
something in the project is trying to access
window during build time which is not valid since the code is running in the server. the error is giving a hint to the /401 page so you might want to start looking for window usages thereAsian black bearOP
Somewhere else in the project other than /401 page, say? The only indication of window use in the log is inside nextjs code.
no, the components rendered by the
/401 page. it could be code from the app or imported code from libraries, you need to check everything the page is rendering and make sure they aren't trying to access window during the buildAsian black bearOP
@Rafael Almeida Thank you. You were right. I found I'm importing @memgraph/orb in a new file and when I removed it, yarn built perfectly. But How do I add it without causing the build problem again? Here's the top of my file:
'use client'
import {DefaultView, NodeShapeType, Orb, OrbEventType} from "@memgraph/orb"
If I use dynamic import functionality, how would I write it to import the above? It's a client rendering package, so I added 'use client'. But 'use client' didn't prevent build from failing.
I'm new to NextJS so kind of confused. Thanks so much.
'use client'
import {DefaultView, NodeShapeType, Orb, OrbEventType} from "@memgraph/orb"
If I use dynamic import functionality, how would I write it to import the above? It's a client rendering package, so I added 'use client'. But 'use client' didn't prevent build from failing.
I'm new to NextJS so kind of confused. Thanks so much.
Asian black bearOP
I fixed it! Thank you again.