New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refs must have owner #296

Closed
masylum opened this Issue Apr 12, 2016 · 44 comments

Comments

Projects
None yet
@masylum

masylum commented Apr 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@hellendag

hellendag Apr 12, 2016

Collaborator

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

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

Collaborator

hellendag commented Apr 12, 2016

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

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

@hellendag hellendag added the question label Apr 12, 2016

@masylum

This comment has been minimized.

Show comment
Hide comment
@masylum

masylum Apr 14, 2016

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

masylum commented Apr 14, 2016

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

@apuntovanini

This comment has been minimized.

Show comment
Hide comment
@apuntovanini

apuntovanini Apr 22, 2016

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

apuntovanini commented Apr 22, 2016

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

@apuntovanini

This comment has been minimized.

Show comment
Hide comment
@apuntovanini

apuntovanini Apr 23, 2016

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

apuntovanini commented Apr 23, 2016

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

@hellendag

This comment has been minimized.

Show comment
Hide comment
@hellendag

hellendag Apr 24, 2016

Collaborator

@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?

Collaborator

hellendag commented Apr 24, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@mattmarcello

mattmarcello May 2, 2016

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 commented May 2, 2016

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 comment has been minimized.

Show comment
Hide comment
@mattmarcello

mattmarcello May 3, 2016

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

mattmarcello commented May 3, 2016

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

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits May 3, 2016

Member

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.

Member

sophiebits commented May 3, 2016

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

This comment has been minimized.

Show comment
Hide comment
@conor909

conor909 May 31, 2016

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?

conor909 commented May 31, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits May 31, 2016

Member

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

Member

sophiebits commented May 31, 2016

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

@conor909

This comment has been minimized.

Show comment
Hide comment
@conor909

conor909 Jun 1, 2016

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

conor909 commented Jun 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@bitmapdata

bitmapdata Jun 4, 2016

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'));

bitmapdata commented Jun 4, 2016

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'));

@hellendag hellendag added the meta label Jun 20, 2016

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Oct 5, 2016

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?

jdu commented Oct 5, 2016

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?

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Oct 5, 2016

To mitigate this, I've gone through the entire draft-js lib folder and commented out all occurrences of imports of React and ReactDOM so that Draft-js doesn't override my already loaded React version.

I don't use any other react based plugins which is why I've not had this issue in the past. There must be some valid way to override the loading of react via require() or import in third-party libraries (not harping on you guys, it's just a general statement) as it essentially is making a design decision for you for how your application should be organized and how React should be loaded, which in my case, using require to import React and ReactDOM in every client-side application we have isn't a viable design decision as we have connection speed constraints and we need to aggressively browser cache as much as we can and reduce the application sizes down as lean as we possibly can.

jdu commented Oct 5, 2016

To mitigate this, I've gone through the entire draft-js lib folder and commented out all occurrences of imports of React and ReactDOM so that Draft-js doesn't override my already loaded React version.

I don't use any other react based plugins which is why I've not had this issue in the past. There must be some valid way to override the loading of react via require() or import in third-party libraries (not harping on you guys, it's just a general statement) as it essentially is making a design decision for you for how your application should be organized and how React should be loaded, which in my case, using require to import React and ReactDOM in every client-side application we have isn't a viable design decision as we have connection speed constraints and we need to aggressively browser cache as much as we can and reduce the application sizes down as lean as we possibly can.

@john-osullivan

This comment has been minimized.

Show comment
Hide comment
@john-osullivan

john-osullivan Oct 29, 2016

Running into this same issue when using https://github.com/draft-js-plugins/ . The issue seems to be that these Draft.js libraries are importing their own copy of React. Isn't this what npm's peerDependencies are for? If people are using Draft.js then they must already be using and loading React elsewhere, would moving "react" to the peerDependency list fix this issue?

Edit: I'm also using react-router to deliver the component tree that the Draft.js editor is eventually a child of.
Edit 2: On the other hand, running npm ls yields only one instance of React in my dependency tree. @bitmapdata , how'd you end up resolving this? Inspecting the internal instance shows that the component which should render the Draft.js input doesn't have an owner, and none of the children of the components rendered by react-router have owners either. The page component itself has an owner, but its child components don't. Did it end up being a react-router issue for you?

john-osullivan commented Oct 29, 2016

Running into this same issue when using https://github.com/draft-js-plugins/ . The issue seems to be that these Draft.js libraries are importing their own copy of React. Isn't this what npm's peerDependencies are for? If people are using Draft.js then they must already be using and loading React elsewhere, would moving "react" to the peerDependency list fix this issue?

Edit: I'm also using react-router to deliver the component tree that the Draft.js editor is eventually a child of.
Edit 2: On the other hand, running npm ls yields only one instance of React in my dependency tree. @bitmapdata , how'd you end up resolving this? Inspecting the internal instance shows that the component which should render the Draft.js input doesn't have an owner, and none of the children of the components rendered by react-router have owners either. The page component itself has an owner, but its child components don't. Did it end up being a react-router issue for you?

@saymy

This comment has been minimized.

Show comment
Hide comment
@saymy

saymy commented Dec 2, 2016

+1

@uyson

This comment has been minimized.

Show comment
Hide comment
@uyson

uyson commented Dec 13, 2016

  • 1
@FourwingsY

This comment has been minimized.

Show comment
Hide comment
@FourwingsY

FourwingsY Jan 17, 2017

I've found something weird.
if I use npm install draft-js --save, no error.
but yarn add draft-js, error occur.

FourwingsY commented Jan 17, 2017

I've found something weird.
if I use npm install draft-js --save, no error.
but yarn add draft-js, error occur.

@Darmikon

This comment has been minimized.

Show comment
Hide comment
@Darmikon

Darmikon Jan 17, 2017

Is any way to solve this problem?

Darmikon commented Jan 17, 2017

Is any way to solve this problem?

@iPekka

This comment has been minimized.

Show comment
Hide comment
@iPekka

iPekka Feb 1, 2017

Having the same issue. I'm trying to use draft-js inside a third-party library of components (via npm).
Have you found any good solution ?

iPekka commented Feb 1, 2017

Having the same issue. I'm trying to use draft-js inside a third-party library of components (via npm).
Have you found any good solution ?

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jun 26, 2017

Contributor

We just investigated a similar issue - #951 and were not able to reproduce the problem.

Sorry that this issue has gotten stale - wondering if folks are still running into this? Also if it's related to https://github.com/draft-js-plugins/ please file an issue there, thanks!

Contributor

flarnie commented Jun 26, 2017

We just investigated a similar issue - #951 and were not able to reproduce the problem.

Sorry that this issue has gotten stale - wondering if folks are still running into this? Also if it's related to https://github.com/draft-js-plugins/ please file an issue there, thanks!

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Jun 26, 2017

We actually abandoned draft-js on this alone as it sort of broke everything when we tried to use it. It wasn't related to the plugins repo it was on import of draft-js.

I'm away until near week but I can give it a try then and see if the issue is still there for us and get back to you as we'd still like to use it.

jdu commented Jun 26, 2017

We actually abandoned draft-js on this alone as it sort of broke everything when we tried to use it. It wasn't related to the plugins repo it was on import of draft-js.

I'm away until near week but I can give it a try then and see if the issue is still there for us and get back to you as we'd still like to use it.

@john-osullivan

This comment has been minimized.

Show comment
Hide comment
@john-osullivan

john-osullivan Jun 26, 2017

We abandoned it as well. I tried filing an issue at https://github.com/draft-js-plugins/ but didn't get anywhere. Not sure why it's so hard to reproduce on y'all's end. Maybe it's an npm vs. yarn issue? @jdu , which one are you all using?

john-osullivan commented Jun 26, 2017

We abandoned it as well. I tried filing an issue at https://github.com/draft-js-plugins/ but didn't get anywhere. Not sure why it's so hard to reproduce on y'all's end. Maybe it's an npm vs. yarn issue? @jdu , which one are you all using?

@gaearon gaearon referenced this issue Jul 7, 2017

Closed

React 16 Umbrella ☂️ (and 15.5) #8854

117 of 120 tasks complete
@RyanCCollins

This comment has been minimized.

Show comment
Hide comment
@RyanCCollins

RyanCCollins Jul 10, 2017

@flarnie, I am still running into this issue. Seems to be exactly the same as the others here. Is there a solution to this?

RyanCCollins commented Jul 10, 2017

@flarnie, I am still running into this issue. Seems to be exactly the same as the others here. Is there a solution to this?

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Jul 10, 2017

jdu commented Jul 10, 2017

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jul 11, 2017

Contributor

For more context - this error is almost always caused by having multiple copies of React loaded. That can easily happen if you are using npm. See https://facebook.github.io/react/warnings/refs-must-have-owner.html

We are going to improve the error messaging on the React side and come up with better documentation about how to avoid this problem.

Thanks everyone for the comments and info.

Contributor

flarnie commented Jul 11, 2017

For more context - this error is almost always caused by having multiple copies of React loaded. That can easily happen if you are using npm. See https://facebook.github.io/react/warnings/refs-must-have-owner.html

We are going to improve the error messaging on the React side and come up with better documentation about how to avoid this problem.

Thanks everyone for the comments and info.

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jul 11, 2017

Contributor

Also see this issue on React for tracking the improvements to the error message: facebook/react#9962

Contributor

flarnie commented Jul 11, 2017

Also see this issue on React for tracking the improvements to the error message: facebook/react#9962

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Jul 11, 2017

jdu commented Jul 11, 2017

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jul 11, 2017

Contributor

I'm looking for how to reliably reproduce this - can folks let me know what version of npm, react, and draft you are using? What does your package.json look like? Were you using yarn or just npm?

@john-osullivan
@jdu
@masylum
@iPekka

For now the way I'm reproducing this is by manually copying node_modules/react into node_modules/draft-js/node_modules/react.

Contributor

flarnie commented Jul 11, 2017

I'm looking for how to reliably reproduce this - can folks let me know what version of npm, react, and draft you are using? What does your package.json look like? Were you using yarn or just npm?

@john-osullivan
@jdu
@masylum
@iPekka

For now the way I'm reproducing this is by manually copying node_modules/react into node_modules/draft-js/node_modules/react.

@john-osullivan

This comment has been minimized.

Show comment
Hide comment
@john-osullivan

john-osullivan Jul 11, 2017

My setup is likely different from these other people, but like @jdu said, it boils down to draft-js loading its own React. Using plenty of other React plugins, this is the only one giving me the issue.

Our app is built on Meteor, so we're using the Meteor+NPM integration which gives us npm@4.6.1. react@15.5.4, draft-js@0.9.1. We abandoned draft-js a pretty long time ago, as there were more important issues and we couldn't wait on this bug -- other people will likely have a more representative setup for the current versions.

Are all of the draft-js devs using yarn? Can't wait for the moment when yarn users start causing bugs for npm users in the name of better guarantees :P

john-osullivan commented Jul 11, 2017

My setup is likely different from these other people, but like @jdu said, it boils down to draft-js loading its own React. Using plenty of other React plugins, this is the only one giving me the issue.

Our app is built on Meteor, so we're using the Meteor+NPM integration which gives us npm@4.6.1. react@15.5.4, draft-js@0.9.1. We abandoned draft-js a pretty long time ago, as there were more important issues and we couldn't wait on this bug -- other people will likely have a more representative setup for the current versions.

Are all of the draft-js devs using yarn? Can't wait for the moment when yarn users start causing bugs for npm users in the name of better guarantees :P

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Jul 11, 2017

I'm seeing if I can reproduce it in a simple example now, not sure if it still happens as we encountered the issue quite a while ago but will post up a repo if I can get it to happen.

jdu commented Jul 11, 2017

I'm seeing if I can reproduce it in a simple example now, not sure if it still happens as we encountered the issue quite a while ago but will post up a repo if I can get it to happen.

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Jul 11, 2017

Right, I've reproduce this @flarnie in a simple setup, the repo is here https://github.com/jdu/draft-js-borked if you pull that and run ./server.sh and go to localhost:8000 you should get the error.

The package.json in the repo is what's been used to build it, it use browserify and babel, to build it again you can run make dev.

Sorry its not a very nodejs build system but I did it quickly by replicating our old build pipeline from 6+ months ago.

The web server is just a python simpleHTTPServer.

If I run this in Chrome I get the error

react-dom.js:18125 Uncaught Error: 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).
    at invariant (react-dom.js:18118)
    at Object.addComponentAsRefTo (react-dom.js:10760)
    at attachRef (react-dom.js:11695)
    at Object.ReactRef.attachRefs (react-dom.js:11714)
    at ReactDOMComponent.attachRefs (react-dom.js:11529)
    at CallbackQueue.notifyAll (react-dom.js:959)
    at ReactReconcileTransaction.close (react-dom.js:11408)
    at ReactReconcileTransaction.closeAll (react-dom.js:14826)
    at ReactReconcileTransaction.perform (react-dom.js:14773)
    at batchedMountComponentIntoNode (react-dom.js:9794)

The key difference here is that react isn't imported into the app.js bundle, it's referenced from the index.html file.

jdu commented Jul 11, 2017

Right, I've reproduce this @flarnie in a simple setup, the repo is here https://github.com/jdu/draft-js-borked if you pull that and run ./server.sh and go to localhost:8000 you should get the error.

The package.json in the repo is what's been used to build it, it use browserify and babel, to build it again you can run make dev.

Sorry its not a very nodejs build system but I did it quickly by replicating our old build pipeline from 6+ months ago.

The web server is just a python simpleHTTPServer.

If I run this in Chrome I get the error

react-dom.js:18125 Uncaught Error: 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).
    at invariant (react-dom.js:18118)
    at Object.addComponentAsRefTo (react-dom.js:10760)
    at attachRef (react-dom.js:11695)
    at Object.ReactRef.attachRefs (react-dom.js:11714)
    at ReactDOMComponent.attachRefs (react-dom.js:11529)
    at CallbackQueue.notifyAll (react-dom.js:959)
    at ReactReconcileTransaction.close (react-dom.js:11408)
    at ReactReconcileTransaction.closeAll (react-dom.js:14826)
    at ReactReconcileTransaction.perform (react-dom.js:14773)
    at batchedMountComponentIntoNode (react-dom.js:9794)

The key difference here is that react isn't imported into the app.js bundle, it's referenced from the index.html file.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jul 12, 2017

Member

@jdu In your example the app code uses a global React and ReactDOM from separate vendor files, but then Draft.js uses the react from npm. This is what's causing the issue. You can either change the app to use React from npm too, or you can change the browserify setup to shim react and react-dom npm packages with global variables. Does this make sense? This doesn’t sound very specific to Draft—I’d expect you to have this issue with every npm library of React components.

Member

gaearon commented Jul 12, 2017

@jdu In your example the app code uses a global React and ReactDOM from separate vendor files, but then Draft.js uses the react from npm. This is what's causing the issue. You can either change the app to use React from npm too, or you can change the browserify setup to shim react and react-dom npm packages with global variables. Does this make sense? This doesn’t sound very specific to Draft—I’d expect you to have this issue with every npm library of React components.

@gaearon gaearon referenced this issue Jul 12, 2017

Open

Fix the build #1

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jul 12, 2017

Member

@jdu I sent a PR to fix the build in your example: jdu/draft-js-borked#1

I hope it helps others, but if your setup is different, please share it and we’ll try to fix them too.

There is another way to fix it (by telling browserify that it shouldn’t bundle react and react-dom from npm, and should instead use the globals). I’m not sure which browserify option does that.

Member

gaearon commented Jul 12, 2017

@jdu I sent a PR to fix the build in your example: jdu/draft-js-borked#1

I hope it helps others, but if your setup is different, please share it and we’ll try to fix them too.

There is another way to fix it (by telling browserify that it shouldn’t bundle react and react-dom from npm, and should instead use the globals). I’m not sure which browserify option does that.

@jdu

This comment has been minimized.

Show comment
Hide comment
@jdu

jdu Jul 12, 2017

@gaeron Thanks for the pull request, we use a shim now in our current build (we swapped to webpack a while back) but still don't import any third-party react components, but at the time we encountered the problems with draft-js, draft-js was the only react library we used (everything was built from scratch). In my original comments, the reason we were loading the react libs in the html file was because we have around 20+ client-side applications loaded at different URIs using the same index and built on react, so we load React/ReactDOM and some other common libraries from the index rather than import them into the apps themselves to reduce the client app sizes and allow users to cache those libraries.

At the time we'd only been using React for a few months and it wasn't clear at the time how to overcome this, the key here being we're commenting on an issue from Oct of last year, plenty of change has happened in React (and it's associated build processes) since that time and we've got months more experience using the framework versus then and understand better how to handle things like this.

I think at least for us, if we imported draft-js into our current builds it would probably be fine, it was just a the time of this issues creation and the subsequent initial comments everything was a lot newer and it wasn't as easily understandable why importing a library would overwrite something you had already declared in your application, now you see loads of stack overflow questions and other sites posts which boil down to having two reacts loaded in a single react application, whether better error messages as @flarnie talked about are the key I'm not really sure, it seems (to me) that if this is as wide-spread of a mistake/stumbling block as it seems to be that React should be capable of detecting a pre-existing instance of itself and not to overwrite while at the same time issue a warning in the console to the effect that a component tried to load a secondary copy of React. But that's on reacts side and nothing really to do with draft-js.

Thanks for having a look.

jdu commented Jul 12, 2017

@gaeron Thanks for the pull request, we use a shim now in our current build (we swapped to webpack a while back) but still don't import any third-party react components, but at the time we encountered the problems with draft-js, draft-js was the only react library we used (everything was built from scratch). In my original comments, the reason we were loading the react libs in the html file was because we have around 20+ client-side applications loaded at different URIs using the same index and built on react, so we load React/ReactDOM and some other common libraries from the index rather than import them into the apps themselves to reduce the client app sizes and allow users to cache those libraries.

At the time we'd only been using React for a few months and it wasn't clear at the time how to overcome this, the key here being we're commenting on an issue from Oct of last year, plenty of change has happened in React (and it's associated build processes) since that time and we've got months more experience using the framework versus then and understand better how to handle things like this.

I think at least for us, if we imported draft-js into our current builds it would probably be fine, it was just a the time of this issues creation and the subsequent initial comments everything was a lot newer and it wasn't as easily understandable why importing a library would overwrite something you had already declared in your application, now you see loads of stack overflow questions and other sites posts which boil down to having two reacts loaded in a single react application, whether better error messages as @flarnie talked about are the key I'm not really sure, it seems (to me) that if this is as wide-spread of a mistake/stumbling block as it seems to be that React should be capable of detecting a pre-existing instance of itself and not to overwrite while at the same time issue a warning in the console to the effect that a component tried to load a secondary copy of React. But that's on reacts side and nothing really to do with draft-js.

Thanks for having a look.

@davidbarker

This comment has been minimized.

Show comment
Hide comment
@davidbarker

davidbarker Jul 19, 2017

I seem to be having the same problem. I'm not sure when it started, but on the production server I was getting the error, but my local was fine. The only difference being that production was using yarn but local was using npm install. I actually have no idea what I did, but production started working (all I did was clear out my local node_modules directory, and ran yarn, and committed and pushed the lock file to production).

However, I checked my local today and that was broken (although I'm not sure how as it was working fine when I went to bed last night!)

So, I cleared out my node_modules directory again and ran npm install and my local is now working fine.

I can't figure out a) why it suddenly broken on production, and b) why there's a discrepancy between production and local. Presumably yarn vs. npm install is the issue? I'm now worried that my next push to production will break production again.

davidbarker commented Jul 19, 2017

I seem to be having the same problem. I'm not sure when it started, but on the production server I was getting the error, but my local was fine. The only difference being that production was using yarn but local was using npm install. I actually have no idea what I did, but production started working (all I did was clear out my local node_modules directory, and ran yarn, and committed and pushed the lock file to production).

However, I checked my local today and that was broken (although I'm not sure how as it was working fine when I went to bed last night!)

So, I cleared out my node_modules directory again and ran npm install and my local is now working fine.

I can't figure out a) why it suddenly broken on production, and b) why there's a discrepancy between production and local. Presumably yarn vs. npm install is the issue? I'm now worried that my next push to production will break production again.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jul 19, 2017

Member

Run npm ls react to see where React is in the tree. If you have it there twice that's the problem.

Member

gaearon commented Jul 19, 2017

Run npm ls react to see where React is in the tree. If you have it there twice that's the problem.

@davidbarker

This comment has been minimized.

Show comment
Hide comment
@davidbarker

davidbarker Jul 19, 2017

/usr/local/var/www/
├─┬ linkifyjs@2.1.4
│ └── react@15.6.1  deduped
└── react@15.6.1 

Does deduped mean that this isn't an issue?

davidbarker commented Jul 19, 2017

/usr/local/var/www/
├─┬ linkifyjs@2.1.4
│ └── react@15.6.1  deduped
└── react@15.6.1 

Does deduped mean that this isn't an issue?

@john-osullivan

This comment has been minimized.

Show comment
Hide comment
@john-osullivan

john-osullivan Jul 19, 2017

Quick update, I was able to resolve this error by stripping out a deprecated library which we were using to connect Meteor to react-router on the server. Just in case one of the other 42 people with that library installed run across this, reactrouter:react-router-ssr is super broken -- ditch it!

john-osullivan commented Jul 19, 2017

Quick update, I was able to resolve this error by stripping out a deprecated library which we were using to connect Meteor to react-router on the server. Just in case one of the other 42 people with that library installed run across this, reactrouter:react-router-ssr is super broken -- ditch it!

@bvaughn bvaughn referenced this issue Aug 1, 2017

Closed

React 16 RC #10294

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Aug 11, 2017

Contributor

Hi all - hopefully we have enough info here to help anyone who runs into this debug their situation to remove the extra copies of React they may have loaded. For now I'm closing this since it is not a bug in Draft and there are no actionable items on our side.

Thanks everyone for talking through the resolution of several cases of the issue!

Contributor

flarnie commented Aug 11, 2017

Hi all - hopefully we have enough info here to help anyone who runs into this debug their situation to remove the extra copies of React they may have loaded. For now I'm closing this since it is not a bug in Draft and there are no actionable items on our side.

Thanks everyone for talking through the resolution of several cases of the issue!

@flarnie flarnie closed this Aug 11, 2017

@flarnie flarnie referenced this issue Aug 16, 2017

Open

Draft 0.11.0 Umbrella #1312

1 of 14 tasks complete
@apuntovanini

This comment has been minimized.

Show comment
Hide comment
@apuntovanini

apuntovanini Aug 31, 2017

I'm sorry to come back on this, but yes, multiple copies of React could be the issue (which I don't have), though many other react packages work either way. I had the same issue with another library, namely https://github.com/vlad-ignatov/react-numeric-input, which lists react as a devDependency but uses string refs. I really thing that string refs are the very reason why it doesn't work for some environments.
Couldn't #925 or similar PR fix this?

apuntovanini commented Aug 31, 2017

I'm sorry to come back on this, but yes, multiple copies of React could be the issue (which I don't have), though many other react packages work either way. I had the same issue with another library, namely https://github.com/vlad-ignatov/react-numeric-input, which lists react as a devDependency but uses string refs. I really thing that string refs are the very reason why it doesn't work for some environments.
Couldn't #925 or similar PR fix this?

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Sep 23, 2017

Contributor

I'm happy to accept PRs updating the ref syntax, but I also think it's usually a mistake when someone ships two copies of React, so it has been convenient in a way that this warning pops up.

Also just found one of the Draft.js examples reliably reproduces this warning, and it looks like a bug with yarn to me. Opened an issue, so anyone else running into this might check there. yarnpkg/yarn#4532

Contributor

flarnie commented Sep 23, 2017

I'm happy to accept PRs updating the ref syntax, but I also think it's usually a mistake when someone ships two copies of React, so it has been convenient in a way that this warning pops up.

Also just found one of the Draft.js examples reliably reproduces this warning, and it looks like a bug with yarn to me. Opened an issue, so anyone else running into this might check there. yarnpkg/yarn#4532

@williamlifaith

This comment has been minimized.

Show comment
Hide comment
@williamlifaith

williamlifaith Sep 28, 2017

I met this issue when I use Material UI.'Element ref was specified as a string (clickAwayableElement) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).'Does anyone has the solution?

williamlifaith commented Sep 28, 2017

I met this issue when I use Material UI.'Element ref was specified as a string (clickAwayableElement) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).'Does anyone has the solution?

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Sep 28, 2017

Member

@williamlifaith There are many comments on this issue describing this issue in detail.

Member

sophiebits commented Sep 28, 2017

@williamlifaith There are many comments on this issue describing this issue in detail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment