Loses displayName when using React.createClass

[glenjamin]

In the following code

var App = React.createClass({
  render: function() {
    return <div />;
  }
});

Babel (via https://github.com/babel/babel/tree/development/packages/babel-plugin-react-display-name) adds the displayName property based on the variable name.

However, this react-transform plugin doesn't seem to find these display names. Perhaps this is something to do with the ordering of the plugins?

I notice you have a test-case which confirms this behaviour - https://github.com/gaearon/babel-plugin-react-transform/blob/master/test/fixtures/classic/expected.js#L146 - was this intentional or just something that isn't yet supported?

[Plummat]

+1. My PropType warning also come through as 'ProxyClass' instead of the actual component

[Plummat]

Actually, this is resolved if I include the display-name plugin before react-transform plugin.

[gaearon]

Actually, this is resolved if I include the display-name plugin before react-transform plugin.

Yes, this is the intended usage. PR to document this is appreciated.

[joefiorini]

If anyone else runs into this, I was getting an error about conflicting plugins because babel was loading the react-display-name plugin automatically. Specifying it manually before react-transform in my .babelrc caused it to be loaded twice. I found in the babel docs you can tell plugins when to run so by specifying:

plugins: ["react-transform:after"]

I was able to make everything run in the correct order and fixed the conflict error.

[gaearon]

This wasn't the case before. Are you running some new Babel version?

[joefiorini]

It's possible. I just updated to 5.8.25 today.

[gaearon]

Let's keep it open until we figure it out.

[greypants]

@joefiorini's fix worked for me. Just add :after

My full .babelrc:

{
  "stage": 1,
  "env": {
    "development": {
      "plugins": ["react-transform:after"],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }
      }
    }
  }
}