Storing components by 'displayName' make wrapping unavailable

[mbektimirov]

In Moreartyjs we use text fields wrappers to render with requestAnimationFrame. React does not support setting displayName property directly into wrapped component (it throws Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs...)

So now hot loader claims it already have an undefined component:
Found duplicate displayName in DOM.js: "undefined". react-hot-loader uses displayName to distinguish between several components in one file.

Is it possible to generate component unique id and use it instead displayName?

[gaearon]

I'd like to. Any ideas how to tell class A is still class A in next version of module? Ideally we'd also like to support dynamically generated classes inside function. I can't think of a way to do that now..

[gaearon]

We can probably differentiate by call index (first createClass in module, second, etc) and disable hot reload for createClass calls after module definition (this will avoid problems with functions). Would you like to try?

[mbektimirov]

I didn't read through all code yet, is it possible to simply check for an id property and create it if necessary?

[gaearon]

Ah, I see now, your use case is createClass inside a function. Same as #24.

React does not support setting displayName property directly into wrapped component

Um, you're sure? I thought it worked.. Is it true for 0.11? So you can't do

  return React.createClass({
    displayName: displayName,

?

That's weird...

[mbektimirov]

That's right, this problem is actual for 0.11. Same issue with Om: omcljs/om#124

[gaearon]

OK, looking into that.

[gaearon]

Why does this work for me?

http://jsbin.com/jaxezekeni/1/edit?html,js,output

/** @jsx React.DOM */

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

var A = wrap('yo');
var B = wrap('dawg');

var X = React.createClass({
  render: function () {
    return <div><A /><br /><B /></div>;
  }
});

React.renderComponent(<X />, document.body);

[mbektimirov]

Maybe the problem is with transferPropsTo?

[gaearon]

Your code works for me too. (Fixed fiddle to use displayName)

[mbektimirov]

It's very strange. I'll investigate it more precisely.

[gaearon]

Are you sure you have 0.11 locally?
Maybe you updated package.json but old dependency is still there.

Om comment is from February so it may not be relevant anymore..

[mbektimirov]

Figured it out. React was loaded twice in a bundle. Thank you for help. I'm closing this issue.

[gaearon]

Woah, that's quite a common problem actually. I wish React warned right away when this happens!