Client components not interactive

[AaronVr]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 17.1.0
      npm: 8.1.2
      Yarn: 1.22.15
      pnpm: 6.11.0
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/AaronVr/nextjs-client-component-bug

To Reproduce

1. Start with the base Next.js project with default settings
2. Create a new file called app/counter.tsx
3. Create the following client component within app/counter.tsx:

   
   'use client'

import { useEffect, useState } from 'react'

export default function Counter() { const [count, setCount] = useState(0)

useEffect(() => { console.log('In use effect.') }, [])

return (

You clicked {count} times

{console.log(count); setCount(count + 1);}}>Click me

) }

4. Create the following server component in `app/page.tsx`:

import Counter from "./counter";

/* Add your relevant code here for the issue to reproduce / export default function Home() { return

}

5. Execute `npm run dev` and open in browser. 
6. Look at the browser console: the `useEffect` did not print anything to the console.
7. Click the 'Click me' button to increment the counter. 
8. The counter does not increment.

### Describe the Bug

When creating the following client component:

'use client'

import { useEffect, useState } from 'react'

export default function Counter() { const [count, setCount] = useState(0)

useEffect(() => { console.log('In use effect.') }, [])

return (

You clicked {count} times

{console.log(count); setCount(count + 1);}}>Click me

) }

React hooks do not seem to work and the button's `onClick` function does not work.

### Expected Behavior

When creating a client component as described above, the useEffect function should be called and the onClick function should call the provided handler function.

### Which browser are you using? (if relevant)

Safari 16.1 (18614.2.9.1.12)

### How are you deploying your application? (if relevant)

_No response_

[AaronVr]

When I change to "next": "13.4.10", everything works as intended.

[icyJoseph]

It works here https://stackblitz.com/github/AaronVr/nextjs-client-component-bug?file=README.md

Recently we saw this error with Node 16.13, and earlier. Could you maybe try a different Node version? Say 18?

[AaronVr]

Using a newer node version (20) actually did fix it! Thanks so much!

[icyJoseph]

So Node 17 is also not good? Could you please confirm if was Node 17 you had before?

[AaronVr]

Yes, I had Node 17 before. (More precisely: v17.1.0)

[icyJoseph]

Ugh, I was expecting this to be only on Node 16.13 and lower. Alright then, it is best to use the Node LTS anyway.

If you are good to go, please do close the issue :)

[huozhi]

Wonder if node 17.1 is too early that nodejs have some bug fixes after it as the newer version of node v17 is v17.9.1, may consider just upgrading to newer nodejs too see if it fixes for you?

[handycode]

Everything works when I upgrade Node to newer version (20). The old Node version was 16.13

Using a newer node version (20) actually did fix it! Thanks so much!

[LudoWeb]

Same error with Node v18.17.1

[jasperdegens]

Error was fixed for me on Node v18.17.1 -- also working on our vercel deployment which is Node v10.x

[jh10z]

Bug persisted for me as well. Downgraded next to 13.4.10 and client components are now working 🥲

[Enzo-PVsyst]

I have the same problem with node v20.16.0

When starting server, on first page render, client components are not functionnal. Using NextJS v14.2.5

Any workaround ?

[Mahdhir]

I have the same problem with node v20.16.0

When starting server, on first page render, client components are not functionnal. Using NextJS v14.2.5

Any workaround ?

Might be related to this https://github.com/wallabyjs/console-ninja/issues/332

[MahirAlam]

I have deployed in vercel. But the problem still exists! I am React Query and react query dev tools. Sometime react query doesn't show any query! It shows and the site becomes interactive again when I reload the page. It seems like the page is server component and "use client" doesn't have any effect?