Skip to content

Instantly share code, notes, and snippets.

@jimfb
Last active July 13, 2019 06:35
Show Gist options
  • Star 43 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • 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.

@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

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

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

@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

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

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

@fsalinasmendoza
Copy link

@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

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

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

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

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

Thanks!

@bacchir
Copy link

bacchir commented Nov 18, 2018

Thanks man! You saved me a lot of hours.

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