Next.js 13.4: useEffect and State Not Updating in Client-Side Component

Question

I encountered an issue in Next.js 13.4. When I created a Next.js project using the command npx create-next-app@latest, and then followed the steps, I encountered a problem with a Counter component. I created a file called Counter.tsx inside the /app/components/ directory. The content of the Counter.tsx file is as follows:

'use client'

import { useEffect, useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  console.log('The component is mounted')
  useEffect(() => {
    console.log('This line should print in the browser console')
  }, [])
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

The content of the /app/page.tsx file is:

import Counter from './components/Counter'

export default function Home() {
  return (
    <main>
      <Counter />
    </main>
  )
}

In this code, the first line 'The component is mounted' is printed in the terminal, but the second line 'This line should print in the browser console' is not displayed in the browser console as expected. This line should be printed in the browser console since it's a client-side component. Additionally, the count doesn't update in the browser when I click the button.

I am using Next.js version 13.4.4. I tried using the latest version, but the problem persists. Here is my package.json:

"dependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }

I've tested this on different browsers including Chromium and Edge, and the result is the same. In the Edge console, I see the following error:

Uncaught (in promise) Error: Cannot read properties of undefined (reading '_RUNTIME_')
    at wrappedSendMessageCallback (AEKXD7GI.js:920:22)

I'm feeling quite frustrated with this issue. If you have any solutions, I would greatly appreciate your help.

1. I downgraded the Next.js version from 13.4.19 to 13.4.4 after seeing it work correctly in a YouTube video.
2. I tested it in Chromium and Edge browsers without any errors.

Answer 1

So I was actually able to replicate this error exactly as you described.

However this isn't related to next or useEffect from what I am seeing.

The error occurred only when I downloaded a Google Chrome extension and re-ran your code in my GitHub Repo.

I'd suggest removing the extension WebChatGPT.

See the picture below that shows your code running with that error. If you remove it the cold will work.

Good luck!