Skip to content

Instantly share code, notes, and snippets.

Last active July 13, 2019 06:35
Show Gist options
  • Save jimfb/4faa6cbfb1ef476bd105 to your computer and use it in GitHub Desktop.
Save jimfb/4faa6cbfb1ef476bd105 to your computer and use it in GitHub Desktop.
addComponentAsRefTo Invariant Violation

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.

Copy link

I had no multiple imports in npm but webpack packed react into the source twice due to me using the unspecific import path.

import ReactDOM from 'react-dom';
import ReactDOM from 'react/lib/ReactDOM';

Copy link

As @Markues pointed out:

For anyone using ReactCSSTransitionGroup I had to add it to my external dependency array as well.

var dependencies = [

Copy link

  • Invalid Refs:

I had same problem and solved:

var React = require('React');

var React = require('react');

Copy link

OttlikG commented Apr 25, 2016

I solved the refs probleme with this:
npm dedupe

Copy link

ms-qing commented Apr 26, 2016

@HolaMan I have the same problem with your. Do you have any solutions?

Copy link

@dionatanaraujo Wow this was my problem as well hah! Thank you

Copy link

I've managed to solve this problem with solution, mentioned by @vyorkin.

To import React with addons I had a webpack config section like this:
resolve: { alias: { 'react$': 'react/dist/react-with-addons.js' } }
which caused the problem and was not optimal of course due to loading pre-compiled script from dist.
My first solution was to add an alias to 'react-dom$': 'react-dom/dist/react-dom.js'

My final config is:
resolve: { alias: { 'react$': 'react/lib/ReactWithAddons.js', 'react-dom$': 'react/lib/ReactDOM.js' } }

Copy link

kebot commented May 20, 2016

I run into this problem when I start my webpack server in msys, but it works will after I switch to cmd. It works well in Mac and Linux. So I guess it's a problem with msys or webpack.

Copy link

Thanks @debradley!!! That did it for me :)

Copy link

incleaf commented May 26, 2016

rm -rf node_modules
npm install

Works for me. Thanks!

Copy link

Panczo commented May 26, 2016

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

Copy link

For me only full reinstalling of node_modules did worked.

Copy link

oklas commented May 30, 2016

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)

Copy link

@OttlikG the dedupe finally worked for me

Copy link

infacq commented Jun 7, 2016

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

Copy link

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 :

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+"

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'

Copy link

daifee commented Jun 27, 2016

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


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

Copy link

mruhlin commented Jul 19, 2016

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.

Copy link

djllhs commented Aug 4, 2016

@jasongonzales23 works great

Copy link

ZLester commented Nov 17, 2016

@titanve Did you ever find a fix for this?

Copy link

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

Copy link

@JedWatson Thank you very much!

Copy link

SoxFace commented Feb 13, 2017

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
├─ hoist-non-react-statics@1.2.0
│  ├─ react-addons-create-fragment@^15.0.0
│  ├─ react-addons-transition-group@^15.0.0
│  ├─ react-event-listener@^0.4.0
├─ react-addons-create-fragment@15.4.2
├─ react-addons-shallow-compare@15.4.2
├─ react-addons-transition-group@15.4.2
├─ react-dom@15.4.2
├─ react-event-listener@0.4.1
│  ├─ react-addons-shallow-compare@^15.4.2
├─ react-tap-event-plugin@2.0.1
├─ react@15.4.2
│  ├─ hoist-non-react-statics@^1.0.0

$ npm ls | grep react
react_rails_starter_app@0.1.0 /Users/131432/Projects/atomicjolt/social_widgets
│ ├── react-addons-create-fragment@15.4.2
│ ├── react-addons-transition-group@15.4.2
│ ├─┬ react-event-listener@0.4.1
│ │ └── react-addons-shallow-compare@15.4.2
│ │ ├── hoist-non-react-statics@1.2.0
├─┬ react@15.4.2
├── react-dom@15.4.2
└── react-tap-event-plugin@2.0.1


Copy link

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

Copy link

mpyw commented Apr 3, 2017

I got the same as @SoxFace ...

Copy link

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

Copy link

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>

Copy link

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

"DEDUPED" is what causes the problem to be solved


Copy link

bacchir commented Nov 18, 2018

Thanks man! You saved me a lot of hours.

Copy link

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.

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