Client component useState hook doesn't work (Node updated)

[gorkemkose]

Link to the code that reproduces this issue

https://github.com/gorkemkose/NextJSBugReport

To Reproduce

1. Start the application (npm run dev)
2. Navigate to localhost:3000/sarachane in browser (port might change ofc)
3. Look at the related code below, inside the src/app/sarachane/components/SearchBar.js:

import { useState, useEffect } from 'react'

function SearchBar() {
  const [searchQuery, setSearchQuery] = useState('')
  useEffect(() => {
    console.log('Component mounted on the client side')
  }, [])
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      handleSubmit()
    }
  }

  const handleChange = (event) => {
    console.log(searchQuery)
    setSearchQuery(event.target.value)
  }

  const handleSubmit = () => {
    // Add your submit logic here
    console.log('Search submitted:', searchQuery)
  }

  return (
    <div className={styles.searchBar}>
      <img src="/icons/Search.svg" alt="Icon" className={styles.icon} />

      <input
        type="text"
        id="name"
        name="name"
        minLength="4"
        maxLength="8"
        size="10"
        className={styles.inputBox}
        // search={true}
        placeholder="Search by owners, horses and pack"
        value={searchQuery}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
    </div>
  )
}

export default SearchBar

4. UseEffect doesn't print out anything when component mounts.
5. Write something to the search bar and press enter. Nothing happens.

Current vs. Expected behavior

Current Behaviour

useEffect hook doesn't work and useState hook doesn't work either.

Expected Behaviour

The useEffect function should be called and the onClick function should call the provided handler function.

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 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.1
  eslint-config-next: 14.0.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

Not sure

Additional context

I also tried for the latest node.js update and the last stable one. I tried the latest canary relase as well as 14.0.2 release. The bug is reproducible locally.

[gorkemkose]

The issue was my root layout file. It's solved.

[github-actions[bot]]

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.