React: 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).

[benwiley4000]

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).

This has been talked about; the answer: 'don't run two copies of React!'. I got it. Here's the thing: I'm not running two copies of React. I'm building a React component npm module that is installed in a larger project. Within my module, I'm including React as a peer dependency and it's marked as an external in my webpack.config.js. This has actually been working fine all the time, with one exception: when my components have refs.

I've gone so far as to use a document.querySelector() (yikes!) to get rid of that error message. There has to be a better way. I'm opening an issue now, though, because I want to use the react-widgets package and it uses refs. This is breaking my project.

Can't React be smart enough to associate these refs with the running copy of React? Am I missing something?

Thanks

-Ben

[benwiley4000]

Update: This issue has gone away for me. I'm not 100% sure what solved the problem, but I think it may be thanks to upgrading npm to v3.x and node to v4.x -- and/or not using npm link.

[jimfb]

Ok, let's close this out.

@benwiley4000: If you do ever find out what went wrong, and can provide steps to reproduce, we can re-investigate.

[benwiley4000]

I'm fairly certain it's a problem only with npm link, though I'm having trouble producing it on one of the two modules that were experiencing this error before, so there may have been compounding factors related to outdated node/npm versions. For now, consider that my module (react-component-x) relies on a peerDependency, react-widgets, which uses refs. My project, react-project-x requires react-component-x. When react-component-x is installed via npm link, the error above is displayed (I just tested this a moment ago). When I run npm unlink react-component-x inside of react-project-x and then install react-component-x from its remote git repository, the error goes away.

[benwiley4000]

@jimfb Can confirm: Definitely an npm link issue (git installation worked fine with the same older versions of npm/node).

ETA: Maybe, maybe not related to this issue (should have been fixed by now?): https://github.com/npm/npm/issues/5875 If not, it may also be a fault of React.

[frekw]

I'm also seeing this in exactly the same situation.

We have an internal ui library (written in React) that uses refs. Since I want to develop it as the same time as the main application, I've npm link'ed it.

Whenever I try to test a component via mocha (running the Webpack build is fine, probably due to some de-duping going on) I get the following error:

ui-library/foo.js

import React from 'react'

export const Foo = React.createClass({
  render() {
    return <div ref="div">Foo</div>
  }
})

main-project/test/test-that-uses-foo.js

import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import {Foo} from 'ui-library/foo'

it('shouldn\'t blow up', () => {
    const foo = TestUtils.renderIntoDocument(<Foo />)
    ReactDOM.findDOMNode(foo).textContent.should.equal('Foo')
  })

mocha now crashes with the following output:

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).
      at invariant (node_modules/fbjs/lib/invariant.js:39:15)
      at Object.ReactOwner.addComponentAsRefTo (node_modules/react/lib/ReactOwner.js:67:79)
      at attachRef (node_modules/react/lib/ReactRef.js:23:16)
      at Object.ReactRef.attachRefs (node_modules/react/lib/ReactRef.js:42:5)
      at ReactDOMComponent.attachRefs (node_modules/react/lib/ReactReconciler.js:21:12)
      at CallbackQueue.assign.notifyAll (node_modules/react/lib/CallbackQueue.js:65:22)
      at ReactReconcileTransaction.ON_DOM_READY_QUEUEING.close (node_modules/react/lib/ReactReconcileTransaction.js:81:26)
      at ReactReconcileTransaction.Mixin.closeAll (node_modules/react/lib/Transaction.js:202:25)
      at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:149:16)
      at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:282:15)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:136:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:94:20)
      at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:476:18)
      at Object.wrapper [as _renderNewRootComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:550:32)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:570:23)
      at Object.wrapper [as render] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:76:21)
      at Context.<anonymous> (test-that-uses-foo.js:NN:NN)

[frekw]

Also, this still happens on the latest node and npm versions.

$ node -v
v5.7.0
$ npm -v
3.7.5

[frekw]

If anyone gets stuck here again, this workaround works fine: https://www.sharpoblunto.com/News/2016/01/25/testing-react-component-libraries-using-npm-link

[ChenLi0830]

Updating Node and NPM solved the problem for me. Thanks @benwiley4000!

[Jaikant]

adding "import React from 'react'" solved it for me. Weird.

[thespacecadette]

For Jest users, if you declare React inside the 'describe' function, it should work.

[wan54]

Using npm 5.6.0, node 9.5.0, webpack 3 the issue happens to us

Fixed it by creating an alias for react in webpack dev config:

react: path.resolve(__dirname, 'node_modules/react')

[alexeychikk]

I've fixed this by replacing string ref with function ref in one of my deeply nested components.
I had:
<div ref="holder">...</div>
And replaced with:
<div ref={ref => (this.holderNode = ref)}>...</div>