React-datepicker: Uncaught Invariant Violation: addComponentAsRefTo(...)

[Gywem]

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

[rafeememon]

What version of the date picker are you using? Also please post the relevant code as it's very hard to tell what's going on without it.

[Gywem]

react-datepicker v0.25.0

Basically I have a custom component that uses DatePicker, imported as a ReactDatePicker.

import ReactDatePicker from 'react-datepicker';
// [...]
getInitialState: function() {
  return {
    startDate: moment()
  };
},
handleChange: function(date) {
  this.setState({
    startDate: date
  });
},
render() {
    const {
      labelText,
      disabled,
    } = this.props;

    let className = '';
    if (disabled) {
      className += ' disabled';
    }

    return (
      <label className={`field${className}`}>
        { labelText }
        <ReactDatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
        <br />
      </label>
    );
  },

And the callstacks of the errors:

Thanks

[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 { ... }.

[rafeememon]

@Gywem, take a look at #334 and #136 as well (please search for this kind of thing in the future)

[hariramp]

"npm ls react" will tell us the list of react component available in node_modules. I saw two version available, I deleted react folder from node_modules and did npm install again which solved my issue

[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.

```(sh)
$ npm ls react
[email protected] /home/chestozo/my-mega-pack/client
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

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 `[email protected]` and `[email protected]`.

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.

2) 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.