Error message for using refs outside of render() is difficult to understand

[petehunt]

Something about "only a ReactOwner can have refs" -- it's not intuitive.

[jgorham]

Yeah I just saw this and had a wtf

[petehunt]

Would love to add you to the contributors list! :)

[bitshadow]

@petehunt What should be the message then? I can submit a patch.

[petehunt]

@bitshadow something along the lines of: "Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render() method. Try rendering this component inside of a new top-level component which will hold the ref."

[plievone]

Fixed in 72fd246

[ninjasort]

Hello, I'm running into this issue and am unclear on what this actually means. I have a component in ES6 which works fine in ES5, but throws this error when bundling a simple example. https://github.com/cameronjroe/test-react-star-rating Any idea what I'm doing wrong? https://github.com/cameronjroe/react-star-rating/blob/es6/src/StarRating.jsx#L213

[bitshadow]

@cameronjroe Owner-ownee relationship is specific to react components. React uses <span> from DOM and is not created with React.CreateClass. In react terminology its a parent and not owner.

This will help you get clear idea about this. Hope this helps.

[ninjasort]

So does that mean you can't use refs on DOM nodes within a component?

[bitshadow]

No that doesn't mean that (input heavily uses it). You will have to move your span (which doesn't have owner) element to some other component and render it in component's render method and use that component at :213 with ref.

[desmondhume]

Same issue here. This is my code:

var DropdownList = require('react-widgets/lib/DropdownList');

var Dropdown = React.createClass({
  render: function() {
    return (
      <div>
        <span>Dropdown</span>
        <DropdownList data={this.props.colors} />
      </div>
    )
  }
});

module.exports = Dropdown;

It seems to build part of the component, but then fails with:

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.

Suggestions/ideas? Am I missing something?

[syranide]

@desmondhume That makes no sense, there aren't no refs in your example code. The error is originating somewhere else in your case. Invoking <Comp ref="foo" /> anywhere but as a result of render() will cause that error to be thrown.

[desmondhume]

@syranide you're right, my problem seems to be related to this issue #3320. If I copy & paste the module instead of installing it via npm, it works just right. I don't know what's going on actually.

[syranide]

@desmondhume NPM has probably installed two separate React's for you, and the module requires it's own.