[DevTools Bug]: Cannot read properties of undefined (reading 'toLowerCase')

[o-star]

Website or app

React app in development phase

Repro steps

Occurs when you click on a component on the Component tab. Recently, I worked on replacing it with react-hot-loader -> react-refresh. The above error has occurred since the react-refresh application. No error occurs when react-refresh is removed from the webpack. The react-refresh is set the same as the official document.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

4.28.5

Error message (automated)

Cannot read properties of undefined (reading 'toLowerCase')

Error call stack (automated)

utils.js:626 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at formatDataForPreview (utils.js:626:1)
    at dehydrate (hydration.js:83:1)
    at cleanForBridge (utils.js:26:1)
    at Object.inspectElement (renderer.js:3356:1)
    at agent.js:175:1
    at Bridge.emit (events.js:37:1)
    at bridge.js:136:1
    at listener (backendManager.js:1:25284)

Error component stack (automated)

No response

GitHub query string (automated)

No response

[hoxyq]

Thanks for reporting this problem! I believe it happens there: https://github.com/facebook/react/blob/87cb0bf182c59192047d6adaec228d821c298f4a/packages/react-devtools-shared/src/utils.js#L770-L771

But tagName is not an optional field, so it should be present for HTMLElement. Can you try logging what is the data in this case?

[rithik56]

Hi, is anyone working on this issue ?