Skip to content
This repository has been archived by the owner on Apr 9, 2020. It is now read-only.

displayName equals 'Constructor' #96

Closed
klimashkin opened this issue Apr 8, 2016 · 8 comments
Closed

displayName equals 'Constructor' #96

klimashkin opened this issue Apr 8, 2016 · 8 comments

Comments

@klimashkin
Copy link

If use export default React.createClass({..}), babel-plugin-react-transform always set 'Constructor' as display name, and then react-transform-display-name cant replace it with file name, because this construction ReactClass.displayName || basename(filename).replace(extname(filename), '') always returns first one - Constructor
https://github.com/articulate/react-transform-display-name/blob/master/src/index.js

So displayName just doesn't work now.
babel 6.7.6

@klimashkin
Copy link
Author

@gaearon Seems like I found why
I work in Chrome 51 and there function's name property (ES6) has been implemented:
https://www.chromestatus.com/feature/5135002249461760

And this line in react-proxy use it as displayName, so all components become 'Constructor'
https://github.com/gaearon/react-proxy/blob/13f076b17b43a9d53c151931f3629ef1baae42e5/src/createClassProxy.js#L167

I think new Firefox and Edge have the same issue

@gaearon
Copy link
Owner

gaearon commented Apr 18, 2016

How did it work before? I’m not sure what you expect to get because there is no way to infer a display name from export default React.createClass({..}), is there?

@gaearon
Copy link
Owner

gaearon commented Apr 18, 2016

As far as I can see, it used to not provide displayName at all.
I don’t think using Constructor is worse in this situation.
The real problem is export default React.createClass leaving us no opportunity to infer displayName—you wouldn’t have this problem if you either exported an ES class, or declared a createClass() class as a separate variable before exporting it.
I’m closing as I don’t see a good solution to this on our side.

@gaearon gaearon closed this as completed Apr 18, 2016
@klimashkin
Copy link
Author

But what is NextComponent.name? Can it be deleted?

@klimashkin
Copy link
Author

As you can see from second message I use https://github.com/articulate/react-transform-display-name for creating DisplayName from filename

@gaearon
Copy link
Owner

gaearon commented Apr 18, 2016

https://github.com/articulate/react-transform-display-name is confusing to me because it seems to do what babel-plugin-transform-react-displayname already does, and the second one is part of Babel react preset.

This Babel plugin does indeed seem to conflict with babel-plugin-transform-react-displayname, but I likely won’t be working to fix it because I plan to deprecate it altogether in favor of the solution in gaearon/react-hot-boilerplate#61. If you submit a PR that replicates the logic from babel-plugin-transform-react-displayname for inferring displayName in this particular case with tests, I can merge it, but I won’t personally be working on it.

@klimashkin
Copy link
Author

Without https://github.com/articulate/react-transform-display-name all my components are named like ProxyComponent:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method ofProxyComponent`

I knew about it here #19 (comment)

@klimashkin
Copy link
Author

And you are right, everything is fine if I remove babel react-transform plugin, so I'll wait new React Hot Loader 3

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants