ReferenceError: window is not defined... in client component?

[mirasayon]

Link to the code that reproduces this issue

https://github.com/mirasayon/reproduction-app

To Reproduce

"use client"
....
<div
        className="flex w-max transition-transform ease-out duration-1000"
        style={{
          transform: `translateX(-${window.innerWidth * currentIndex}px)`,
        }}
      >
        {children}
</div>

1. npm run build
2. see error in terminal :

1. npm run dev
2. see error in terminal
3. open project in browser
4. see error:
   

Current vs. Expected behavior

Current: There is a strange error and does not allow to build the application

There should be no error since it is a client component

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16209
  Available CPU cores: 12
Binaries:
  Node: 20.13.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.76 // Latest available version is detected (14.3.0-canary.76).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A
PS C:\Users\outm

Which area(s) are affected? (Select all that apply)

Runtime, Testing

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

No response

[marko-hologram]

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 😄

[icyJoseph]

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

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

[icyJoseph]

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.

[icyJoseph]

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.

[icyJoseph]

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

[mirasayon]

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.

[github-actions]

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.