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