What does 'Only a ReactOwner can have refs.' mean?

Question

I have a simple react component with a form in it:

var AddAppts = React.createClass({
    handleClick: function() {
        var title = this.refs.title.getDOMNode().value;
        ....

        var appt = {
            heading: title
            ...
        }

        CalendarActions.addAppointment(appt);
    },

    render: function() {
        return (
            <div>
                <label>Description</label>
                <input ref="title"></input>
                ...
            </div>
        );
    }
});
module.exports = AddAppts;

I am trying to render this component in another react component:

  var AddAppt = require('./AddAppts');

  render: function() {
    return (
      <div>
        <AddAppt />
      </div>
    );
  }

but I get this error:

 Uncaught Error: Invariant Violation: addComponentAsRefTo(...): 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.

I have googled it, but cannot figure out what I need to do to fix this issue.

Those are 2 different files. When I imported the file, I gave it a different name. — jhamm, Feb 15 '15 at 06:02
I tried to replicate what I think is your setup. Is [this](http://jsfiddle.net/brettdewoody/wmL2xvqn/) pretty close? — Brett DeWoody, Feb 15 '15 at 07:42
Could you also state which react version you are using? Have you figured out what the problem is? — flq, Mar 25 '15 at 14:00
I have not figured out the problem. I am using `React 0.13.1` — jhamm, Mar 25 '15 at 21:42
I'm having the same issue. Has anyone found a meaning/solution? — Cameron, Jun 03 '15 at 05:00
In the meantime, Facebook has added a link to the error message: https://gist.github.com/jimfb/4faa6cbfb1ef476bd105. Make sure to have a look at the comments for possible solutions. — pors, Feb 29 '16 at 18:01

JohnSz · Answer 1 · 2015-09-08T12:33:30.440

55

This is FYI for people using react and redux-devtools who are getting OP's message. Your structure looks like

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

The code in client will require the first react module; that in redux-devtools will require the other react. The react module keeps state and assumes it has all the state.

You get the OP's message because your state is split between the 2 react modules. This situation is what I believe @asbjornenge refers to.

I was bundling the client code with webpack, so I used that to handle the issue. You can force all require and import to always use the first react by adding the following to webpack.config.js

module.exports = {
  ...
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    extensions: ['', '.js']
  },
  ...
);

I have not looked into what I would need to do if the situation occurred with unbundled code running on node.

edited Sep 08 '15 at 12:33

answered Sep 07 '15 at 18:09

JohnSz

2,049
18
17

7

Simplest solution I've seen so far considering how fragmented and messy the JS dev community is – twig May 30 '16 at 02:36
You deserve a medal! A bad issue, really - sanity is back on. – Dejan Toteff Aug 27 '16 at 22:20
Why do you need `extensions` property as well as resolve.alias? – netpoetica Sep 12 '16 at 12:43
1

FYI - I personally had to use process.cwd() instead of dirname, but this did work and is very useful. Cheers – netpoetica Sep 12 '16 at 13:39
1

It all depends where your webpack.config file is located @netpoetica. process.cwd() is likely correct more often than __dirname. – JohnSz Sep 13 '16 at 18:35
I _believe_ the empty string in extensions allowed requires of subdirectories e.g. react/lib/index . Sorry, its been a while. – JohnSz Sep 13 '16 at 18:42
This worked for me. I was developing a library locally and had it as a file dependency as such npm wasn't able to flatten the dependencies – Henry Ing-Simmons Oct 04 '17 at 13:22
Just fantastic. Thanks so much! – Brandon Durham Nov 14 '18 at 21:26

score 42 · Answer 2 · edited Sep 30 '15 at 14:32

42

I encountered this error when a component module I was using had it's own react dependency installed. So I was using multiple versions of React.

Make sure NOT to list react under dependencies in your package.json.
This is why we have peerDependencies ;-)

edited Sep 30 '15 at 14:32

Philipp Kyeck

18,402
15
86
123

answered Mar 26 '15 at 11:46

asbjornenge

1,209
13
16

Ah! Thanks for this. I was accidentally compiling two versions of React in a test and coming up with this error. I'd never have found it by myself. Rookie mistake! – Malabar Front May 09 '15 at 19:20
6

Aren't peer dependencies being removed in NPM 3.0? What then? – JohnSz Sep 07 '15 at 17:03
My problem is the order of the loading script. I load react-with-addons.js before react-dom.js. And the problem appeared. I doubt that there are some feature in react-with-addons.js :) – Ni Xiaoni Oct 25 '15 at 04:51
1

@JohnSz peerDependencies are not being removed, they will just warn instead of auto-installing. See https://github.com/npm/npm/issues/6565#issuecomment-74971689. – SystemParadox Jan 21 '16 at 16:13

score 16 · Answer 3 · answered Aug 14 '15 at 00:28

16

Just in case. Be aware of the React module name you are using (it is case-sensitive). I've got the same error when by coincidence I tried to require React dependency with different names in two separate modules.

//module1.js
var React = require('react');
...

//module2.js
var React = require('React');
....

It works and even renders something but the Only a ReactOwner can have refs... error appears.

answered Aug 14 '15 at 00:28

kreig

990
11
18

1

You just save me! I've been digging around for 20 minutes going crazy. I read this and looked down at my editor. Sure enough, a big "require('React')" was staring right back at me. – AndrewJM Feb 19 '16 at 18:39

score 3 · Answer 4 · answered Oct 27 '15 at 04:46

3

Rearranging the script resolved the issue.

Wrong.

<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/react-with-addons.js"></script>

Correct

<script src="./lib/react.js"></script>
<script src="./lib/react-with-addons.js"></script>
<script src="./lib/react-dom.js"></script>

Reference https://github.com/gcanti/tcomb-form/issues/107#issuecomment-150891680

answered Oct 27 '15 at 04:46

VenomVendor

15,064
13
65
96

3

Is including both `react` and `react-with-addons` necessary? Does not the latter include all the code of the former? – Fabio Iotti Mar 02 '16 at 06:58

score 2 · Answer 5 · answered Sep 09 '16 at 06:44

2

I saw this error while developing a react module that was linked to a test project using npm link. Switching to a regular dependency solved the problem.

It seems that React doesn't like npm link.

answered Sep 09 '16 at 06:44

François Zaninotto

7,068
2
35
56

What does 'switching to a regular dependency' mean? – xtrinch Feb 03 '17 at 09:54
`npm link` is a way to use a directory (via a symbolic link) in place of a dependency installed by `npm`. Removing the symbolic link and relaunching `npm install` fixes the problem. – François Zaninotto Feb 04 '17 at 15:56

score 1 · Answer 6 · answered Jul 15 '16 at 01:26

There is another situation.

I set the React as external library in the webpack.config.js and import react.js from cdnjs.

externals: {
  'react': 'React'
}

When I using an ui library depend on React,such as material-ui,react-bootstrap,this issue occurred.

score 0 · Answer 7 · answered Dec 11 '15 at 15:53

am writing with my old pen. make sure in your project root package.json move react dependency as early as possible. still you are getting issue? & if you are using npm modules and grunt task, you can add below clean task to remove inner components react(duplicates).

clean: { react : ['node_modules/**/react','!node_modules/react'] },

score 0 · Answer 8 · answered Feb 26 '16 at 16:05

0

I saw this error after I moved my package.json file up a level, so I had 2 node_modules directories in my project (one in ./node_modules and another in ./web/node_modules). Removing the old directory fixed the problem.

answered Feb 26 '16 at 16:05

ty.

10,924
9
52
71

score 0 · Answer 9 · answered Oct 12 '16 at 13:04

0

For me the reason for the same problem was that I've imported the ReactDom globally, as a property of the window object, like this:

import ReactDOM from 'react-dom'
window.ReactDOM = ReactDOM

removing window.ReactDOM = ReactDOM fixed the problem.

answered Oct 12 '16 at 13:04

Dmitry Sokurenko

6,042
4
32
53

score 0 · Answer 10 · edited May 23 '17 at 11:54

0

Similar to this answer, I was seeing this error while using a separate module that I had been developing in a separate directory using yarn link.

The solution was to run yarn unlink module-name in my project's working directory. I then removed node_modules and ran yarn upgrade module-name and yarn for good measure.

edited May 23 '17 at 11:54

Community

1
1

answered Apr 04 '17 at 20:37

taylor

1,568
1
10
11

score 0 · Answer 11 · answered Dec 28 '17 at 15:22

0

Instead of

<input ref="title"></input>

Try this

<input ref={(title) => this.title = title}></input>

answered Dec 28 '17 at 15:22

Pau Teruel Soldevila

1
1
1

score 0 · Answer 12 · answered Oct 25 '18 at 12:31

None of the given solutions worked for me, though they certainly helped show me where to look.

For some reason my project has two node_modules folders - one in the root directory and one a level up. I'm new to React so I don't know if this is normal or what. I'm just going with what Visual Studio gave me when I started a new project.

Anyway, I knew which module was causing the problem, and it happened to only exist in one of the node_modules folders.

I moved the problem module over to the other node_modules folder. Problem solved.

What does 'Only a ReactOwner can have refs.' mean?

12 Answers12

Linked