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.

@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