Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.

@KidLinus
Copy link

KidLinus commented Apr 18, 2016

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

Then:
import ReactDOM from 'react-dom';
Now:
import ReactDOM from 'react/lib/ReactDOM';

@traviss0
Copy link

traviss0 commented Apr 21, 2016

As @Markues pointed out:

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

var dependencies = [
    'alt',
    'react',
    'react-dom',
    'react-router',
    'react/lib/ReactCSSTransitionGroup',
    'lodash'
];

@dionatanaraujo
Copy link

dionatanaraujo commented Apr 24, 2016

  • Invalid Refs:

I had same problem and solved:

Before
var React = require('React');

After
var React = require('react');

@OttlikG
Copy link

OttlikG commented Apr 25, 2016

I solved the refs probleme with this:
npm dedupe

@ms-qing
Copy link

ms-qing commented Apr 26, 2016

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

@BobbyAdamson
Copy link

BobbyAdamson commented May 8, 2016

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

@Vyprichenko
Copy link

Vyprichenko commented May 13, 2016

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

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

@gparajon
Copy link

gparajon commented May 20, 2016

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

@incleaf
Copy link

incleaf commented May 26, 2016

rm -rf node_modules
npm install

Works for me. Thanks!

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

@makarov-roman
Copy link

makarov-roman commented May 27, 2016

For me only full reinstalling of node_modules did worked.

@oklas
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)

@brickfungus
Copy link

brickfungus commented Jun 1, 2016

@OttlikG the dedupe finally worked for me

@infacq
Copy link

infacq commented Jun 7, 2016

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

@skflowne
Copy link

skflowne commented Jun 13, 2016

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'

@daifee
Copy link

daifee commented Jun 27, 2016

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

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

@djllhs
Copy link

djllhs commented Aug 4, 2016

@jasongonzales23 works great

@ZLester
Copy link

ZLester commented Nov 17, 2016

@titanve Did you ever find a fix for this?

@mdoelker
Copy link

mdoelker commented Dec 21, 2016

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

@fsalinasmendoza
Copy link

fsalinasmendoza commented Feb 11, 2017

@JedWatson Thank you very much!

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

Cheers

@JakeDluhy
Copy link

JakeDluhy commented Mar 31, 2017

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

@mpyw
Copy link

mpyw commented Apr 3, 2017

I got the same as @SoxFace ...

@GideonShils
Copy link

GideonShils commented Jul 6, 2017

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

@alexeychikk
Copy link

alexeychikk commented Feb 23, 2018

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>

@oscar-gomez
Copy link

oscar-gomez commented Apr 14, 2018

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

Thanks!

@bacchir
Copy link

bacchir commented Nov 18, 2018

Thanks man! You saved me a lot of hours.

@amir3code
Copy link

amir3code commented Jul 13, 2019

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