react: [DevTools Bug] Crash when inspecting component using a hook that returns a Proxy

Website or app

https://codesandbox.io/s/react-devtools-crash-with-proxy-in-hook-dxd32?file=/src/App.tsx

Repro steps

Provided is a code sandbox with a very simplified version of the code which triggered this bug.

Open the code sandbox app in a new window
Open developer tools
Select the “Components” tab
Click on the “App” component

Observe that devtools crashed, and the console prints out an error similar to this:

Uncaught TypeError: [Symbol.iterator]() returned a non-object value
    formatDataForPreview moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:849
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1718
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1769
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1767
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1702
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1702
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1769
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1767
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1702
    dehydrate moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1702
    cleanForBridge moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:1195
    inspectElement moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:7827
    agent_Agent moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:9561
    emit moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:4175
    _wallUnlisten moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10201
    listener moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10975
    addEventListener eval:4
    listen moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10978
    Bridge moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10200
    setup moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10968
    welcome moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10947
    addEventListener eval:4
    <anonymous> moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:10950
    __webpack_require__ moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:20
    <anonymous> moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:84
    <anonymous> moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/react_devtools_backend.js:87
react_devtools_b

This happens in both Firefox and Chrome.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.13.5-0ae5290b54

Error message (automated)

Could not inspect element with id 2

Error call stack (automated)

No response

Error component stack (automated)

InspectedElementContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:31391:43
Suspense
ErrorBoundary_ErrorBoundary@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:30033:5
div
InspectedElementErrorBoundaryWrapper@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:30175:46
NativeStyleContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:32660:38
div
div
OwnersListContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:28267:37
SettingsModalContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:28708:40
Components_Components@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:34512:52
ErrorBoundary_ErrorBoundary@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:30033:5
PortaledContent@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:30146:34
div
div
ProfilerContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:34137:35
TreeContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:24944:31
SettingsContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:25547:35
ModalDialogContextController@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:30233:38
DevTools_DevTools@moz-extension://739d174b-7aaa-4387-b750-af9bc181bf82/build/main.js:37240:27

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not inspect element with id 2 in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (11 by maintainers)

Most upvoted comments

yes, just give me a few days to find time for that

ivanhofer on Oct 6, 2021

Fix will go out with the next release.

bvaughn on Jun 11, 2021

I see a slightly different error than the one reported:

Uncaught TypeError: Result of the Symbol.iterator method is not an object
    at Function.from (<anonymous>)
    at formatDataForPreview (react_devtools_backend.js:849)
    at dehydrate (react_devtools_backend.js:1718)
    at react_devtools_backend.js:1769
    ...

I can repro this though so that’s good. I can fix this.

bvaughn on Jun 11, 2021