Which means "Only ReactOwner can have links." I 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 `render` method). Try rendering this component inside of a new top-level component which will hold the ref. 

I have googled, but can't figure out what I need to do to fix this problem.

Answer 1

This is FYI for people using responsive and redux-devtools who receive an OP message. Your structure looks like

 project client node_modules react redux-devtools node_modules react 

The code in the client will require the first reactive module; that redux-devtools will need to respond differently. A reactive module preserves state and assumes that it has all state.

You receive an OP message because your status is split between 2 reactive modules. This situation is what @asbjornenge believes in.

I linked the client code to webpack, so I used it to solve the problem. You can make all require and import always use the first reaction by adding the following to webpack.config.js

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

I did not consider what I would have to do if there were a situation with disaggregated code running on node.

Answer 2

I ran into this error when the component module that I used had its own dependency dependency. Therefore, I used several versions of React.

Make sure that the package.json list in the dependencies list does not indicate the answer in dependencies .
That is why we have peerDependencies ; -)

Answer 3

Just in case. Remember the name of the React module used (it is case sensitive). I have the same error when, by coincidence, I tried to require use the dependency with different names in two separate modules.

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

It works and even visualizes something, but Only a ReactOwner can have errors fixed ...

Answer 4

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

Right

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

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

Answer 5

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

React doesn't seem to like npm link .

Answer 6

There is another situation.

I install React as an external library in the webpack.config.js file and import response.js from cdnjs.

 externals: { 'react': 'React' } 

When I use the ui library, it depends on React, such as material-ui, response-bootstrap, this problem has occurred.

Answer 7

I am writing with my old pen. make sure that in the project.json root package of the project you can respond to the dependency as early as possible. are you still getting the problem? and if you use npm modules and the grunt task, you can add a clean task below to remove internal components (duplicates).

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

Answer 8

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

Answer 9

For me, the cause of the same problem was that I imported ReactDom globally, as a property of the window object, for example:

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

removing window.ReactDOM = ReactDOM fixes the problem.

Answer 10

Like this answer , I saw this error when using a separate module, which I developed in a separate directory using yarn link .

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