ReferenceError: window is not defined... in client component? about next.js HOT 7 CLOSED

Client components still run on the server.

https://nextjs.org/docs/app/building-your-application/rendering/client-components

Client Components allow you to write interactive UI that is prerendered on the server and can use client JavaScript to run in the browser.

The term "client component" means that it also runs on the client, not that it just runs on the client exclusively.

Please read the documentation before opening issues like this to make maintainer's life a bit easier 😄

from next.js.

As the above comment says, client components are still SSR'd, they are just the components you have used up till now, the new thing are server components, which only render server side, and never share their JS with the client.

* [Why do Client Components get SSR'd to HTML? reactwg/server-components#4](https://github.com/reactwg/server-components/discussions/4)

I can understand the confusion, as the name itself has some weight to it, but also, tech-influencers have spread this misinterpretation.

Your reply don’t solve my problem

This is a bug/issue report area, people here focus on narrowing down reports into a reproducible demo, or a non-issue result. For other matters, we should use the discussions tab.

from next.js.

Here you go: https://stackblitz.com/edit/github-zvszab?file=app%2Fpage.tsx

from next.js.

As the above comment says, client components are still SSR'd, they are just the components you have used up till now, the new thing are server components, which only render server side, and never share their JS with the client.

• reactwg/server-components#4

I can understand the confusion, as the name itself has some weight to it, but also, tech-influencers have spread this misinterpretation.

from next.js.

Hi,

The thing is that, your component render pass should be pure, that's like the main React "rule".

Reading from the window object like that, is not pure, the width might change between renders, so to speak.

So what you can do is:

• Defer to client side rendering
  • See Item 6 and 7 here, https://demystifying-rsc.vercel.app/
• Show fallback UI and then synchronize in the client with useEffect or useLayoutEffect
  • https://react.dev/reference/react/useLayoutEffect
• Try to use pure CSS, in your case you can use CSS custom properties, CSS Vars, and 100vw to achieve the same, I think

Also, reading from the window.innerWidth property, causes reflow, https://gist.github.com/paulirish/5d52fb081b3570c81e3a#getting-window-dimensions, which under certain conditions, can be a performance bottleneck.

from next.js.

Here you go: https://stackblitz.com/edit/github-zvszab?file=app%2Fpage.tsx

Thanks bro and sorry for opening an issue and bothering you all because of my carelessness.

from next.js.

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

from next.js.