Imports in 'use client' file encountering "window is not defined" error
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
I currently have a provider.tsx file that is marked with 'use client' and imports a module that is currently throwing a "ReferenceError: window is not defined".
My understanding (based on the documentation https://nextjs.org/docs/app/building-your-application/rendering/client-components) is that if a component is marked with 'use client', then it's imports will also be run on the client, and therefore should not run into issues with window not being defined.
How do I fix this so that the code only runs on the client? I'm currently experiencing a lot of issues migrating my code from pages to app directory because of how unclear it is what code runs where. Thanks!
My understanding (based on the documentation https://nextjs.org/docs/app/building-your-application/rendering/client-components) is that if a component is marked with 'use client', then it's imports will also be run on the client, and therefore should not run into issues with window not being defined.
How do I fix this so that the code only runs on the client? I'm currently experiencing a lot of issues migrating my code from pages to app directory because of how unclear it is what code runs where. Thanks!
13 Replies
Asian black bear
Your understanding is wrong. Components below the server/client boundary are still prerendered on the server.
If you need to use a 3rd party component that is badly written and requires browser APIs and can't be prerendered you need to use
dynamic and disable SSR for that component.Spectacled bearOP
oh this is helpful - can you tell me how to do this / point me in the direction for how to use this?
the library is from a small startup, so not surprised it has these issues
Spectacled bearOP
great, I will play around with this, thank you!
English Angora
@Spectacled bear i am not sure if this is right solution which i am writing because i am new on Nextjs, i solved this by accessing window in useEffect callback on client component
Japanese common catfish
can you provide the code as to how you did that - im dealing with
ReferenceError: window is not defined alsoEnglish Angora
@Japanese common catfish if you are using library do it with dynamic import with ssr false or if you accessing window object in your own component access window object in useEffect callback
English Angora
imagine Component1 is my client component i am importing library in this component which causing window undefined error when importing Component1 in another component do it like this const Component1 = dynamic(() => import('your component path'),{ssr: false})
with ssr false Component1 run entierly on Client Side
if you are accessing window object on your own Component do it in useEffect callback because client components also run on server on initial page load so window is not available on server
Japanese common catfish
thank you that worked!!!!