addComponentAsRefTo Invariant Violation

react-refs-must-have-owner.md

You are probably here because you got the following error messages:

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.

This usually means one of two things:

• You are trying to add a ref to an element that is being created outside of a component's render() function.
• You have multiple (conflicting) copies of React loaded (eg. due to a miss-configured NPM dependency)

Invalid Refs

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.

Multiple copies of React

Bower does a good job of deduplicating dependencies, but NPM does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.

If you are using npm... npm ls or npm ls | grep react might help illuminate.

I'm using browserify rails and react-rails gem. I had this issue when i wanted to add reactdatetimepicker to my app. Nothing from above helped me. My problem gone when i removed //= require react and put inside my components.js React = require('react'); ReactDOM = require('react-dom');

For me only full reinstalling of node_modules did worked.

There two more reasons to multiple (conflicting) copies of React loaded caught to me:

1. loading with require togather with duplicate loading from cdn by script tag in html.
   (to fix remove one of that)
2. loading with require in project and loading with require in dependent library.
   (to fix configure externals webpack section of dependent library, set react as external)

@OttlikG the dedupe finally worked for me

any idea if using meteor system how to run check number of react loaded?

I finally have been able to solve this for myself. I'm using Rails and was using react-rails for React integration. I moved on to this gem : https://github.com/netguru/react_webpack_rails

I guess my problem was a bit specific though. My problem was to import 'react-color' components and I kept getting the invariant error. I knew there was an issue specific to 'react-color' because 'react-css' would have a dependency with another React version and then I would have 2 versions.

But even trying with older versions not depending on 'react-css', I kept having the error even though I checked there was only one React version in npm.

I noticed they fixed it recently by depending on mochas instead, so I changed my dependencies to include the github version "react-color": "git+https://github.com/casesandberg/react-color/"

And now it finally works ! Hope this helps, I think going to webpack helped since it still didn't work with the older version of 'react-color'

@michaeljones i solved it by change the order of loading script

before

<script src="cnd/react.js"></script>
<script src="cnd/react-dom.js"></script>
<script src="cnd/react-with-addons.js"></script>

after (work):

<script src="cnd/react.js"></script>
<script src="cnd/react-with-addons.js"></script>
<script src="cnd/react-dom.js"></script>

I'm having this problem with npm link specifically.

I am developing a library that has react as a devDependency and using that library in a parent project that also uses react.
The library uses webpack in its build process to spit out a single js file that treats react as an external dependency.

So, if I do

cd /parentProject
npm install /myLibrary

myLibrary is installed into /parentProject/node_modules/myLibrary without its dev dependencies. So when I build the main project, only one copy of react gets included.

If I do

cd /myLibrary
npm install
npm link

cd /parentProject
npm link myLibrary

that npm install also installs all the devDependencies (including react) into /myLibrary/node_modules
the second npm link turns /parentProject/node_modules/myLibrary into a symbolic link pointing to /myLibrary

So now when I build my parent project, I guess the parts of myLibrary that are pointing to react pull in the one from /parentProject/node_modules/myLibrary/node_modules/react whereas the parts of parent project that reference react are getting it from /parentProject/node_modules/react.

I'm still an npm newbie, so no doubt I've screwed something up, but my short term workaround is to just stop using npm link, shrug.

@jasongonzales23 works great

@titanve Did you ever find a fix for this?

I also experienced this error when a string ref was used multiple times while mapping over an array.

@JedWatson Thank you very much!

Hi guys, thanks so much for this thread. I'm a little confused as yarn ls and npm ls are returning different lists. Can anyone shed some light as I'm getting the same refs error outlined above.

yarn ls | grep react
├─ [email protected]
│  ├─ react-addons-create-fragment@^15.0.0
│  ├─ react-addons-transition-group@^15.0.0
│  ├─ react-event-listener@^0.4.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ react-addons-shallow-compare@^15.4.2
├─ [email protected]
├─ [email protected]
│  ├─ hoist-non-react-statics@^1.0.0

$ npm ls | grep react
[email protected] /Users/131432/Projects/atomicjolt/social_widgets
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ │ ├── [email protected]
├─┬ [email protected]
├── [email protected]
└── [email protected]

Cheers

I got the same problem as @Xantier with proxyquire. Any luck solving that?

I got the same as @SoxFace ...

@nigelmcnie The GitHub issue you linked saved me, thanks!

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>

I have duplicated react module, I updated npm and the issue was resolved, if you enter "npm ls react", you should have this structure.
| -- [email protected] deduped -- [email protected]

"DEDUPED" is what causes the problem to be solved

Thanks!

Thanks man! You saved me a lot of hours.

Thanks Great!
Guys if you are having problem with GATSBY TYPESCRIPT TSX file giving you this error:
Just Do this:

yarn add react react-dom

Be sure to add react-dom I just forgot it and wasted so much time.