Inspector: clicking on element with style object value causes crash

[twelve17]

When debugging a React Native app, in the "React Devtools" inspector, clicking on an element which has a style with an attribute with a value that is an object, the inspector crashes and logs to the console:

TypeError: Cannot convert object to primitive value

In my case, this is because my stylesheet is specifying a color via the color npm, which creates a Color object.

I cannot confirm, but I suspect that, in normal operation, React Native is doing toString(), or inspecting the style attribute values, so that the Color object is interpreted properly (since outside the debugger, it works as expected), whereas the debugger is not expecting the value to be an object:

Here's an Expo snack for reproducing the problem. It simply sets a color in the styles as such:

backgroundColor: Color('#ecf0f1'),

The Expo app will run just fine, you have to debug it with the inspector to see the problem in this issue.

1. Export the Expo app to your computer, unzip the archive.
2. npm i
3. npm install --save react-native-vector-icons
4. Run the react-devtools, open a new tab and choose port 19001
5. expo start --ios
6. Enable JS Debugging in the simulator's developer menu.
7. In the dev tools, open the React Devtools inspector.
8. Tap on this element:

Crash:

/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19 TypeError: Cannot convert object to primitive value 
    at new t (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:27:238405)
    at si (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:51064)
    at Mi (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:59993)
    at Ni (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:66399)
    at Sa (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:83087)
    at Ea (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:83454)
    at sl (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:89975)
    at al (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:89355)
    at tl (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:88376)
    at Pa (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:87279)
    at Object.enqueueSetState (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:19:50396)
    at t.x.setState (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:11:1891)
    at t.value (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:27:233233)
    at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/build/standalone.js:27:226376
    at Array.forEach (native)

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools