Missing component names about react-devtools

[fresh5447]

I am using the chrome plugin React Developer Tools and when I inspect the React tree I see 'Proxy Component' instead of the components actual name. Might be a webpack issue? I tried adding 'displayName' and that didn't do it.

Anyone else run into this issue?

[mrjoes]

OK, here's quick update: if component is exposed like this, it'll have Unknown as a name:

exports.MyComponent = React.createClass({...});

However, when I change it to this, it starts to work:

var MyComponent = React.createClass({...});
exports.MyComponent = MyComponent;

I checked extension source code, but can't figure what's tagName and how it is set.

[vjeux]

If you are not using JSX, you need to add a displayName attribute to your class.

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  ...
});

If you are using JSX, this is done automatically. Unfortunately there isn't a way to get it otherwise.

[mrjoes]

Yes, I'm using JSX. So, it seems it is different issue - JSX compiler can not contribute displayName if component is declared with exports.ComponentName = React.createClass().

[vjeux]

This is the code responsible for it: https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/reactDisplayName.js#L37

[sebmarkbage]

JSX could in theory support your format too. This problem is going away when we move to ES6 classes or something similar though.

The tagName is something that's part of DOM components in React's core. It doesn't have a displayName.

[sebmarkbage]

If you want to send a pull request you could add your preferred formats here:

https://github.com/facebook/react/blob/ab47e992155ec9c2455b02bf671e8dd92bd01055/vendor/fbtransform/transforms/reactDisplayName.js#L37-L51

[mrjoes]

Understood, thanks. Manual displayName will work for now.

[sophiebits]

Just made facebook/react#799 which should fix this for all cases that I can think of.