displayName is set to "o" when minifiying Stateless function components via webpack

[jimbolla]

Given a component defined as:

export const SubmitButton = ({readyState, defaultText, pendingText}) => (
    <button
        className="btn btn-lg btn-primary btn-block"
        type="submit"
        disabled={readyState === "pending"}>
        {
            readyState === "pending"
                ? (pendingText || defaultText)
                : defaultText
        }
    </button>
);

and minified with webpack's UglifyJsPlugin, you get components with displayName "o" in the React browser tools.

[towry]

React component will use function name as the component's displayName if the displayName is not set.

var A = React.createClass({...})

The component's displayName is A, so since you minified the js code, I think React taken the correct function name o as the displayName.

[imevro]

It's problem with minification, not with react. Keep your variables names.

[jimbolla]

Uglify may be the culprit, but React is the one that suffers because of it. Not minifying code isn't really a good answer. I tried it with setting mangle: false and then it reported all the component names as StatelessComponent. My thought was maybe what we need is a Babel transform that adds whatever is needed.

[towry]

@jimbolla Why you need uglify in development mode? I suggest you disable uglify in dev mode and enable it in production mode.

[zpao]

React doesn't do the transformation but feel free to file an issue against babel. If there's something React needs to do differently we can reopen.

[sophiebits]

You shouldn't minify in development mode anyway.

[silvenon]

So our code shouldn't rely on displayName if it's going to get mangled? I use displayName to check if a child is a specific type, is this bad practice then?

[sophiebits]

@silvenon I wouldn't recommend it. Why not compare the type to the object exactly?

[silvenon]

Mind blown 😮 Thanks a bunch!

For others who stumble onto this discussion:

import React from 'react';
import Foo from './Foo';

const Bar = (props) => {
  if (props.children.type === Foo) {
    // ...
  }

  return /* ... */;
};

[dminkovsky]

If stateless functions support .propTypes and .defaultProps as static members, would it be possible to support .displayName in that same way as well?

[sophiebits]

@dminkovsky I haven't tried but I would expect that to already work?

[dminkovsky]

@spicyj Totally works :D