Refs must have owner

[masylum]

Hi,

I just wanted to try Draft.js and tried to drop the example in my application and I've got the https://fb.me/react-refs-must-have-owner issue.

I simplified a little bit my code, but looks something like this:

// ModalComposer.jsx
import React from 'react'
import { Editor, EditorState } from 'draft-js'

const ModalComposer = React.createClass({
  getInitialState () {
    return {
      editorState: EditorState.createEmpty()
    }
  },

  onChange (editorState) {
    this.setState({editorState})
  },

  render () {
    const { editorState } = this.state

    return (
      <div>
        <Editor
          editorState={editorState}
          onChange={this.onChange}
        />
      </div>
    )
  }
})

export default ModalComposer

// Modal.jsx
import { connect } from 'react-redux'
import ModalComposer from './ModalComposer.jsx'
import * as modalActions from '../../ducks/modals'
import React from 'react'

const Modal = React.createClass({
  propTypes: {
    dispatch: React.PropTypes.func.isRequired
  },

  onClickClose () {
    this.props.dispatch(modalActions.pop())
  },

  render () {
    return (
      <div>
        <button onClick={this.onClickClose}></button>
        <ModalComposer />
      </div>
    )
  }
})

export default connect()(Modal)

I get the following:

invariant.js:39 Uncaught 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

When I comment out the component ModalComposer (which is basically the draft-js one) I don't get this warning, so its not related to npm and dependencies.

Thanks in advance!

[hellendag]

I don't see any obvious problems with the code here.

At what point are you seeing this invariant? Immediately when the component renders?

[masylum]

I will try to debug it and isolate better the issue to give you better information

[apuntovanini]

+1 @masylum, same issue here, with super simple example

[apuntovanini]

@hellendag I see it when the component renders, no matter whether it is included in a more complex component or rendered simply

[hellendag]

@apuntovanini Can you provide a gist of your code? Are you seeing any issues with refs in the examples provided with the draft-js repo?

[mattmarcello]

I am seeing this issue with the most contrived example in both chrome and firefox.

Also, in more complex examples that involve unmounting of this component, i am seeing a removeComponentAsRefFrom(...) invariant.

import React, { PropTypes, Component } from 'react';
import {
  Editor,
  EditorState,
} from 'draft-js';

export default class MyEditor extends Component {

  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
  }

  render() {
    const { editorState } = this.state;
    return <MyEditor editorState={ editorState } />
  }
}

ReactDOM.render(
  <MyEditor/>,
  document.getElementById('root')
);

[mattmarcello]

This issue was resolved for me by ensuring that I don't have multiple copies of React loaded.

[sophiebits]

It's very likely that anyone else seeing this is also using multiple copies of React – probably one that Draft is using and one that the rest of your app is using. It's possible we could change Draft to use the function-style refs that can work around this problem, but you don't want multiple copies of React regardless because it's inefficient and can cause other problems like this.

[conor909]

The error message does mention that there is probably multiple versions of react. I'v tried a few suggestions around node package installs but I still get the error. Does this mean the Draft.js repo is not ready or is it something we can fix?

[sophiebits]

@conor909 Can you gist the output of "npm ls"?

[conor909]

I'm using a windows terminal and not sure how else to log the full output to a file, I could only copy as far as windows will allow me to scroll back up: Does this help? https://gist.github.com/conor909/62080cc39472569316d3e2e87e455156

[bitmapdata]

I met this issue when i using a react-router delivered component.

...
ReactDOM.render((
  <Router history={browserHistory}>
    <Route component={App} path='/'>
      <Route path='login' component={LoginComponent}/>
      <IndexRoute onEnter={loginRequired} component={DraftComponet}/>
    </Route>
  </Router>
), document.getElementById('app'));

[jdu]

I'm having this issue now in a simple use-case. Essentially, due to the structure of my application I load React and ReactDOM using script tags in the sites head tags. The reason being there are multiple client-side applications which depend on it and rather than bundling it into each application, it's easier to just include it in the page as a header script tag.

I tried rendering a simple Draft-js Editor using the exact same code as @mattmarcello above (minus the React imports as it's already in the DOM) within one of my client-side applications. If I do this, react complains about an Invariant Violation which seems to trace to there being multiple Reacts being loaded as mentioned above when Editor is used. Up until I imported Draft-js, this issue didn't exist, so it's directly correlated to Draft-JS.

Is there a way to specify Draft-JS's copy of React[DOM] to use so that it uses the already loaded modules instead of overriding the existing one?