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"]
          }]
        }
      }
    }
  }
}

[rubengrill]

Is this an issue again with babel 6?
I set plugin transform-react-display-name before react-transform...

.babelrc:

{
  "presets": [
  ],
  "plugins": [
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-react-display-name"],
        ["react-transform", {
          "transforms": [
            {
              "transform": "react-transform-catch-errors",
              "imports": ["react", "redbox-react"],
            },
          ],
        }],
      ],
    },
  },
}

Component:

var React = require('react');


var Blub = React.createClass({

  render: function() {
    return null;
  }

});

module.exports = Blub;

babel src/components/Blub.jsx

import _redboxReact from 'redbox-react';
import _react from 'react';
import _reactTransformCatchErrors from 'react-transform-catch-errors';
const _components = {
  _component: {}
};

const _reactTransformCatchErrors2 = _reactTransformCatchErrors({
  filename: 'src/components/Blub.jsx',
  components: _components,
  locals: [],
  imports: [_react, _redboxReact]
});

function _wrapComponent(id) {
  return function (Component) {
    return _reactTransformCatchErrors2(Component, id);
  };
}

var React = require('react');

var Blub = _wrapComponent('_component')(React.createClass({

  render: function () {
    return null;
  }

}));

module.exports = Blub;

package.json

    "babel-core": "^6.3.15",
    "babel-plugin-transform-react-display-name": "^6.3.13",
    "babel-plugin-react-transform": "^2.0.0-beta1",
    "react-transform-catch-errors": "^1.0.0"

[markgoodyear]

I'm using Babel 6 with a similar set up to @rubengrill, however the displayName doesn't seem to be getting added.

[wesbos]

I've got the same error as @rubengrill - this doesn't show my the displayName

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["transform-react-display-name"],
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    }
  }
}

[minfawang]

Same as above. Any news here?

[oliviertassinari]

Is this an issue again with babel 6?

Looks like it's, I have it too.

[martinbigio]

I'm running into the same issue. Since I'm prototyping something and I don't care about speed I ended up running babel.transform twice, first with transform-react-display-name, and syntax-jsx plugins only and later on with all the other ones, including react-transform. Sharing this workaround in case s useful for anyone.

[martinbigio]

Also, I've added a couple of console.log to debug the issue and looks like the problem is that babel 6 is not respecting the order in which plugins are added. Tried using :after but couldn't make it work and looks like the old syntax `position: [before|after] no longer works on babel 6.

is this a KP or are we just using the API the wrong way? :)

[gaearon]

@thejameskyle Is this something you can offer advice on?

[oliviertassinari]

Tried using :after but couldn't make it work and looks like the old syntax `position: [before|after] no longer works on babel 6.

Yes, It seems that plugins all run in parallel with babel 6 (https://phabricator.babeljs.io/T6730).
That could be linked to this issue.
For instance, I had to make this commit to make my plugin work with another plugin (transform-react-inline-elements) oliviertassinari/babel-plugin-react-remove-properties@c52e7eb

[xizhao]

Hey all, I found a solution.

There's a obscure package here: https://www.npmjs.com/package/react-transform-display-name that provides the same functionality as a transform in react-transform

Under the react-transforms hash add

{
  "transform": "react-transform-display-name"
}

My full config:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-display-name"
          }, {
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    }
  }
}

[jamiebuilds]

Moving to #67