window is not defined in client component

[perkrlsn]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/flamboyant-raman-97mj32?workspaceId=4fb0f693-c0d6-4c29-89b6-650d655f9a6b

To Reproduce

1. Create a new next application npx create-app@latest
2. Create a new component, add the "use client" directive and a simple console.log . e.g.

"use client";

const Chocolate = () => {
  console.log(window.location.href);

  return <span>Chocolate</span>;
};

export default Chocolate;

3. Render said component in the root page.tsx
4. Observe the error output

 ⨯ src/app/chocolate.tsx (4:15) @ window
 ⨯ ReferenceError: window is not defined
    at Chocolate (./src/app/chocolate.tsx:9:17)
digest: "505391162"
  2 |
  3 | const Chocolate = () => {
> 4 |   console.log(window.location.href);
    |               ^
  5 |
  6 |   return <span>Chocolate</span>;
  7 | };
 GET / 500 in 19ms

Current vs. Expected behavior

I expect window to be defined in client components.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Mon Sep 30 21:38:25 UTC 2024
  Available memory (MB): 30842
  Available CPU cores: 16
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: N/A
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Developer Experience

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

next dev (local)

Additional context

Wrapping the console.log in a useEffect obviously works. But since I explicitly define this as a client component, I would expect that this wouldn't be necessary.

[samcx]

@perkrlsn A Client Component still technically runs on the server first before being available on the Client → https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs.

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#windowhistorypushstate → in this example, the window object is accessed only until the client module has been loaded.

[perkrlsn]

Thank you for your reply @samcx!