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:          


        

Answer 1

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

Answer 2

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.

Answer 3

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 ;-)

Answer 4

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.

Answer 5

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.

Answer 6

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