Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Debugging 'Objects are not valid as a React child'

I work in a very large monorepo, lots of changes, lots of developers. A couple days ago it totally broke, only in prod, with the error:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

Oddly reverting to previous versions is not addressing the issue at all. This comes up frequently enough on StackOverflow, and I think I know the basic cause. What I’m looking for is a way to get a more descriptive error message to help pinpoint where the failure is. As it stands the full message doesn’t get out of node_modules:

2:50:14 PM [vike][request(1)] Following error was thrown by the onRenderHtml() hook defined at /src/renderer/+onRenderHtml.tsx
server-1  | Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
server-1  |     at renderNodeDestructiveImpl (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6194:11)
server-1  |     at renderNodeDestructive (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
server-1  |     at renderIndeterminateComponent (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5790:7)
server-1  |     at renderElement (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5961:7)
server-1  |     at renderNodeDestructiveImpl (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
server-1  |     at renderNodeDestructive (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
server-1  |     at renderContextProvider (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5935:3)
server-1  |     at renderElement (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6032:11)
server-1  |     at renderNodeDestructiveImpl (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
server-1  |     at renderNodeDestructive (/usr/src//apps/marketing/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Looks like this was an issue of juggling multiple instances of React in an npm monorepo. Even though these all had distinct package.json files, having different versions of React in the common node_modules folder was a timebomb. I'll need to clean out the project further, and maybe get all the projects on the same React version. In the interim, a co-worker found that using --legacy-peer-deps was enough to get everything at least working, ie: npm install --legacy-peer-deps -w


  2. 0

    In React, you need to display primitive values like strings and numbers. However, you are trying to display JavaScript objects. To resolve this, you should:

    1. Use breakpoints and the debugger.
    2. Use React Developer Tools, specifically the Components tab.
    3. Use console.log to check what you are trying to display

    Additionally, try fixing your bug by using the "Matryoshka doll" method: break the problem into smaller parts and solve them one by one.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search