Incorrect component name when using JSX and browserify

[slorber]

This is not a big deal, but in some Browserify cases the React component name is not correctly inferred from the variable name it is assigned, like it is normally the case during JSX transformation.

This works fine:

var Footer = React.createClass({
    ...
});
module.exports = Footer;

And produce error messages like: Warning: Required prop "appState" was not specified in "Footer". In this error message, the component name Footer was correctly inferred.

Now with another kind of node module declaration:

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

This does not work: Warning: Required prop "appState" was not specified in "exports"

This is quite annoying because it's then not so easy to know in which component we didn't inject the required props, and I guess some other usecases.

In case the React class is assigned to module.exports, I guess the component name should rather be the filename.

Don't know if it's a bug or a feature request, just wanted to mention that

[ToucheSir]

What about assigning a displayName to the component manually?

[jamesbrewerdev]

I'm not able to reproduce this on Chrome 35. Using the following syntax works fine for me:

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

@ToucheSir's recommendation will probably work too, but it is unwise to depend on the internal workings of React to make your own code work. Relying on displayName falls into this category.

[sophiebits]

displayName is part of the supported API; see http://facebook.github.io/react/docs/component-specs.html#displayname.

Normally I lean towards just always doing it as in the first example, though it might be nice to special-case exports.

[ToucheSir]

@BRWR I was under the impression it wasn't, as pointed out above. How else would one create debuggable components without using JSX?

[zpao]

@slorber We hit this internally at FB too, but in those cases we just say what @spicyj said - add displayName manually, or assign to a variable before exporting.

There's not much we can really do at this point. We might be able to get the filename in the transform step, but that's a gamble too (how often will it be index.js?). Since it's a crapshoot either way, I'm going to close this out. Thanks for filing though! :)

So I suggest the manual approach here. Luckily it's pretty greppable (exports = React.create) so a little bit of manual work and lint rule should things better.

[slorber]

thanks @zpao you are right using the filename is not an ideal solution anyway