NextJS console logs TypeError on console everytime I make a request on localhost: Cannot read properties of undefined (reading '_owner')

Question

Edit:I also realized that this only occurs on Chrome, in other browsers I'm not seeing these errors.

I just have created a simple NextJS project following couple of tutorials, it's TypeScript included, but after I npm run dev I see below log on console

TypeError: Cannot read properties of undefined (reading '_owner')
    at t (backend.bundle.js:1:119865)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122106)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122106)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at E (backend.bundle.js:1:122126)
    at n (backend.bundle.js:1:123584)
    at c (backend.bundle.js:1:123643)
    at backend.bundle.js:1:124007
    at 496 (backend.bundle.js:1:125067)
    at i (backend.bundle.js:1:110)
    at backend.bundle.js:1:902
    at backend.bundle.js:1:913

The project works properly, it doesn't block anything, but why am I seeing this log everytime?

I also tried to start new projects using create-next-app and just ran the project, but still even everything is created by default (I didn't even touch any file) I still got the above error message.

Everytime I make request to a URL on localhost, it logs the above error message. I have no idea what's this, I think it comes from NextJS inside, it's not even relevant to my codes (I don't even have a variable or something called "owner" or even "own")

Why I see this error message on the console? How can I get rid off it?,

Edit: After I've added couple of elements, It has started to throw this too

TypeError: Cannot read properties of undefined (reading '0')
    at t (backend.bundle.js:1:119861)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122106)
    at t (backend.bundle.js:1:122074)
    at t (backend.bundle.js:1:122074)
    at E (backend.bundle.js:1:122126)
    at n (backend.bundle.js:1:123584)
    at c (backend.bundle.js:1:123643)
    at backend.bundle.js:1:124007
    at 496 (backend.bundle.js:1:125067)
    at i (backend.bundle.js:1:110)
    at backend.bundle.js:1:902
    at backend.bundle.js:1:913

Because of this console messages, after 5-10 renders, on console I see 500+ messages and this is frustrating. How can I get rid of this issue?

Answer 1

The culprit, in my case, was Reactime. This drove me nuts!

Answer 2

Turns out, the problem occurs only on Chrome. So after some digging, I've figured out that a Chrome extension causes this problem. It's neither about Node.js version or being in development mode.

But right now, the problem is, the console.log()s are too much and they take lots of space in console (after I use the project for like 3-4 minutes, then when I go to console, it takes 3-4 seconds to be interactive because of the thousands console.logs() waiting for finish).

I'll try to block any console.log() message (even if it comes from an extension or whatsoever) and solve the problem via this way.

Answer 3

1. Please update your node.js to latest LTS.
2. If you are using experimental app directory, be informed that it is still in Beta and you may see some bugs there.

If the problem is not resolved, I strongly suggest you to share your code and the tutorial you followed so that others can help.

Answer 4

If the error only throws on Chrome, here's a similar case discussed.

Check out if you have VPN or Ad-Blocker enabled. I also had unknown connection errors with it, so I disabled those while on localhost URLs.

---

If it still doesn't work, then try setting reactStrictMode to false on next.config.js

Here's the link you may find helpful.

However, it's not a good solution long-term-wise to turn off strictMode as @joaogarin mentioned on the link page.

Answer 5

This is not caused because of code bug.

You can try to disable the development mode on next.js by setting the dev property to false in the next.config.js file.

module.exports = {
  dev: false,
  // ...other config
}

This might help to see if the error is caused by the development environment or not.

Update Node.js

Make sure that you're using a version of Node.js that is compatible with the version of Next.js you're using.

Next.js docs: https://beta.nextjs.org/docs/installation

The easiest way to do that would be to go the Node.js site and download the proper v16.9 executable.

Please update to Node.js 16.8 or later.

Update Next.js

Run the command npx create-next-app -g this command will create a new Next.js app and also update the global installation of Next.js to the latest version.

In package.json check Next.js version.

Check if the version is latest. Docs: https://www.npmjs.com/package/next

If the explanation is not enough please let me know I will update the answer.