Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs

[mockdeep]

Trying to integrate react-select into our application and we're seeing the following error. There may be something in our workflow that is causing it. We're using ReactDOM to render react components into our page.

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

An example:

// other code
function init() {
  model.on('change', renderRecipientDisplay);
}

function logChange(val) { console.log("Selected: " + val); }

function renderRecipientDisplay() {
  var ReactSelect = require('react-select');
  var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }];

  ReactDOM.render(
    (
      <ReactSelect name="form-field-name" value="one" options={options} onChange={logChange} />
    ),
    $el.find('.routing-recipient-display')[0]
  );
}

[albertoclarit]

I encounter this problem few days ago with the same message as you got from the console...

The reason was React module was loaded twice. I had an html file that contains

<script type="text/javascript" src="<@spring.url "/react/react.min.js"/>"></script>
<script type="text/javascript" src="<@spring.url "/react/react-dom.min.js"/>"></script>
<script type="text/javascript" src="<@spring.url "/react/components/compiled/subcontract.js"/>"></script>

and subcontract.js is generated by webpack.
The problem was one of the modules inside subcontract has a dependency to React module and webpack has also bundled that into the compiled subcontract.js. Therefore two React module was loaded in the page...

[mockdeep]

Yeah, I was trying to explore the same possibility. How did you end up resolving it? Right now we have a version required in our application code, but it looks like react-select is maybe pulling in another copy for some reason.

[jeromegn]

I'm getting the same error, with no indication that I'm loading React more than once.

I'm trying to render <Select /> within one of my other components. Apparently that's not possible since this is using refs. I'm not entirely sure why yet.

This project has figured if they removed refs, it might be easier to nest this component inside another component: https://github.com/bebraw/reactabular/issues/41

[radar]

I'm also getting this error. I will attempt to reproduce this issue in a new application.

[jeromegn]

In the end, it really was React being loaded too many times.

I don't believe the browserify shimming applies to installed node modules. Therefore instead of using the global React, it imports another one. I don't feel like this is an issue with react-select. At least for me, it's an issue with browserify loading multiple copies of the same library (React) when requested more than once by other modules.

If I assign React to global.React and remove all requires of it in the react-select and react-input-autosize files, it works just fine.

[mockdeep]

Is it possible react-select is defining its own require in spite of browserify, so it doesn't have the same reference?

[mockdeep]

Dug in a little deeper and there are two versions of react in my node_modules directory:

node_modules/react/

and

node_modules/react-select/node_modules/react/

I modified the ReactVersion file of each of these and discovered that my application is pulling in the top one, but react-select is pulling in the bottom. What next?

[mockdeep]

I updated npm to 3.4.1 which flattens dependencies and I'm still seeing this issue. I've confirmed that both react-select and my application are both using the same copy of react.

[albertoclarit]

try switching to webpack.. i did not encounter the problem anymore after i remove the

<script type="text/javascript" src="<@spring.url "/react/react.min.js"/>"></script>
<script type="text/javascript" src="<@spring.url "/react/react-dom.min.js"/>"></script>

[hpaul]

I encounter same problem, but it's not caused by duplicate react dependecy.

I'm Implementing a separate form library and React say that I can't use refs outside of ReactOwner.
So, I can't include a react component which use refs. But if I include react-select in main application it works.

This is how I wrap react-select:

import React, { PropTypes, Component } from 'react';
import Select from 'react-select';
import styles from './select.scss';
import withStyles from '../../decorators/withStyles';
import {connect} from 'react-redux';
import { setValue } from '../../actions/validation';

@withStyles(styles)
class Container extends Component {

  render() {
    return (
      <div>
        <Select ref="selectbox" {...this.props} />
      </div>
    );
  }
}

export default connect(state => ({
  validation: state.validation,
}))(Container);

It's a select component.

[nburwell]

I am running into this issue too, using browserify-shim with the following external config:

module.exports = {
  "react": { exports: "global:React" },
  "react-dom": { exports: "global:ReactDOM" }
};

(As we had to load React on the page itself because other code on the page outside of the component I am trying to build relies on it). That was all working fine, until we did the following:

var React = require('react');
var Select = require('react-select');  // <--------- this ends up pulling in a second version of react rather than using the shim / global

module.exports = React.createClass({
  render: function() {
    var options = [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' }
    ];

    return(
      <Select options={options}></Select>
    );
  }
});

Has anyone resolved or worked around this issue while still using browserify-shim for React? It seems like browserify should be using the same configuration when resolving the requires down in a node_module package.

[mockdeep]

We ended up giving up on react-select for the time being.