Uncaught Invariant Violation: addComponentAsRefTo(...)

I am getting the next errors on console when I am instantiating a DataPicker in the render method from my component.

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded

Then when I click on the datapicker input, the dialog is shown, but I got:

react-datepicker.min.js:7 Uncaught TypeError: Cannot read property 'jquery' of null

and

ReactErrorUtils.js:71 Uncaught TypeError: Cannot read property 'focus' of undefined

I am running React v0.14.8. Do you have any idea why this is happening?

Thanks

[chestozo]

I was struggling with the same issue for a day. So finally in my case it was 2 different versions of React inside node_modules but it was somehow difficult to reproduce it - sometimes npm would install only one version, another time - both.

$ npm ls react
my-mega-pack@0.1.0 /home/chestozo/my-mega-pack/client
├─┬ common-components@1.4.4
│ └── react@15.6.1
└── react@15.4.0

There are 2 types of fix as far as I could understand:

1. use same React version as your dependencies In my case it was like on the snippet above - I had react@15.4.0 and react@15.6.1.

This was because in my package.json I had "react": "15.4.0" while in dependency package common-components they had "^15.1.0". After changing version in my package.json to the same version as specified in common-components - "^15.1.0" - it was fixed.

1. another fix is to specify resolve.alias in webpack config (I am using webpack) - found here https://stackoverflow.com/a/42411974/449345 https://stackoverflow.com/a/31170775/449345

Like this:

{
    resolve: {
        alias: {
            react: path.resolve('./node_modules/react'),
            'react-dom': path.resolve('./node_modules/react-dom')
        }
    }
}

Maybe it helps someone else.

[rafeememon]

How are you declaring your class? If it’s a functional component, it won’t work because we use refs; you’ll need to use React.createClass or class Blah extends React.Component { ... }.