Next.js Discord

Discord Forum

Window Not Defined Error

Answered
DylanDev posted this in #help-forum
Open in Discord
DylanDevOP
Hello! I am trying to deploy my Next.js app to Netlify and I keep getting a failure on build due to "ReferenceError: window is not defined". I have noticed these errors in the console before but they haven't broken anything. How do I fix these?
Answered by B33fb0n3
check in your app, where you using window. and remove it. If it's needed, use it only after the component is mounted (inside use effect or after anything that run through a use effect)
View full answer

29 Replies

@DylanDev Hello! I am trying to deploy my Next.js app to Netlify and I keep getting a failure on build due to "ReferenceError: window is not defined". I have noticed these errors in the console before but they haven't broken anything. How do I fix these?
B33fb0n3
check in your app, where you using window. and remove it. If it's needed, use it only after the component is mounted (inside use effect or after anything that run through a use effect)
Answer
@DylanDev Is there an alternative thing I can do instead of using `window.` but to do the same thing?
B33fb0n3
Yes, use it only after the component is mounted (inside use effect or after anything that run through a use effect). Using it inside a function is also allowed
DylanDevOP
So something like this is allowed since its inside of a function?
B33fb0n3
Yes, that would be fine
@B33fb0n3 Yes, that would be fine
DylanDevOP
This wouldn't be allowed im assuming? Before the return ()
Let me know if I am mistakn
@DylanDev This wouldn't be allowed im assuming? Before the return ()
B33fb0n3
exactly. You got my point šŸ‘
@B33fb0n3 exactly. You got my point šŸ‘
DylanDevOP
Okay thank you! @B33fb0n3
I'll let you know if I have any more questions!
B33fb0n3
happy to help
DylanDevOP
@B33fb0n3 Is something like this fine because it is wrapped in that conditional or does it need to be in a use effect
@DylanDev <@301376057326567425> Is something like this fine because it is wrapped in that conditional or does it need to be in a use effect
B33fb0n3
should be fine. Check when the handleTabChange will be called: directly while hydration or after that
@B33fb0n3 should be fine. Check when the handleTabChange will be called: directly while hydration or after that
DylanDevOP
Just to be safe, would something like this do what needs to be done?
@DylanDev Just to be safe, would something like this do what needs to be done?
B33fb0n3
yes, that would be possible, when it's directly called while being on the server. If not, it's fine to use it without all the mounted stuff
DylanDevOP
Actually, looking at one of our dependencies I think it may be the culprit. We use leaflet react on /admin and /game which is where the error is coming from. I found this issue so I think we will be looking into it: https://github.com/PaulLeCam/react-leaflet/issues/1152
DylanDevOP
@B33fb0n3 Is there an easy way to identify where this is coming from? I thought it was potentially a dependency issue but when I made those dynamically imported, i still got the errors.

its specifically on my /game and /admin pages
Generating static pages (0/13)  [=   ]ReferenceError: window is not defined
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:1978
    at 28052 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:148435)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 87658 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\788.js:1:9539)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 71812 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\788.js:1:1617)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 37481 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\app\(main)\game\page.js:1:2351)
    at Object.t [as require] (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at require (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18839) {
  digest: '1835119705'
}

Error occurred prerendering page "/game". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:1978
    at 28052 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:148435)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 87658 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\788.js:1:9539)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 71812 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\788.js:1:1617)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 37481 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\app\(main)\game\page.js:1:2351)
    at Object.t [as require] (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at require (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18839)
ReferenceError: window is not defined
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:1978
    at 28052 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:148435)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 20732 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\app\(developer)\admin\page.js:5:59871)
    at Object.t [as require] (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at require (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18839)
    at i (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:88296)
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:98819
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:98906
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:99109) {
  digest: '3652052418'
}

Error occurred prerendering page "/admin". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:1978
    at 28052 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\chunks\202.js:1:148435)
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at 20732 (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\app\(developer)\admin\page.js:5:59871)
    at Object.t [as require] (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\.next\server\webpack-runtime.js:1:143)
    at require (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18839)
    at i (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:88296)
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:98819
    at C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:98906
    at t (C:\Users\Dylan Ravel\Documents\GitHub\PantherGuessr\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:99109)
The issue is none of these are descriptive
@DylanDev <@301376057326567425> Is there an easy way to identify where this is coming from? I thought it was potentially a dependency issue but when I made those dynamically imported, i still got the errors. its specifically on my /game and /admin pages
B33fb0n3
to find the specific component, that causes the error, comment out in the following order:
1. Everything. Check: Error gone? Yes: Continue to step 2. No: Great, the commented out code does not contain the error
2. Half of the code. Error gone? Yes: Continue to step 3. No: Great, the commented out code does not contain the error
3. The code, that you think that causes the error. Error gone? Yes: Import them without SSR. No: Comment out other code and check again
@B33fb0n3 to find the specific component, that causes the error, comment out in the following order: 1. Everything. Check: Error gone? Yes: Continue to step 2. No: Great, the commented out code does not contain the error 2. Half of the code. Error gone? Yes: Continue to step 3. No: Great, the commented out code does not contain the error 3. The code, that you think that causes the error. Error gone? Yes: Import them without SSR. No: Comment out other code and check again
DylanDevOP
I've been trying this and its been unsuccessful so far.

We believe we have isolated it down to a third-party dependency called "react-leaflet," which sounds like it doesn't support server-sided rendering. This map is used in two places /admin and /game (both of the pages failing to build due to window not defined error)

We are trying to dynamically import them, but it isn't working or we are doing it wrong šŸ˜¦

If you have the time, would you be willing to look at the way I am dynamically importing the package and let me know if its correct?

Interactable Map Component: https://github.com/PantherGuessr/PantherGuessr/blob/fix-of-window.-something-logic/app/(main)/game/_components/interactable-map.tsx

Dynamic Interactable Map Component: https://github.com/PantherGuessr/PantherGuessr/blob/fix-of-window.-something-logic/app/(main)/game/_components/dynamic-interactable-map.tsx

Page that uses Dynamic Interactable Map Component (/game): https://github.com/PantherGuessr/PantherGuessr/blob/fix-of-window.-something-logic/app/(main)/game/page.tsx
Ive tried what you are saying but I don't know where else to look
when I completely delete the maps from the website, all the errors disappear. When I revert the changes, the errors are back. I just don't know if im importing it correctly