skratchdot / react-bootstrap-daterangepicker

A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.
http://projects.skratchdot.com/react-bootstrap-daterangepicker/
Other
475 stars 204 forks source link

Issue with React v16.2.0 #166

Closed DrEVILish closed 4 years ago

DrEVILish commented 6 years ago

I updated my project (2 years old) to React v16 version numbers below "react": "^16.2.0", "react-bootstrap": "^0.32.1", "react-bootstrap-daterangepicker": "^4.1.0", "react-dom": "^16.2.0",

I'm now getting an issue when I load any page with the date picker, the page fails to load and I receive this error

"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object"

I stripped back my implementation but I'm still getting the issue

class DateSelection extends React.Component{
  render() {
    return (
      <DateRangePicker startDate="1/1/2014" endDate="3/1/2014">
        <button>Click Me To Open Picker!</button>
      </DateRangePicker>
    );
  }
}
skratchdot commented 6 years ago

So this is just a proptype warning message? A couple things this brings up: I should create a dev and prod version of this package's bundle (similar to how react does it). No need for type checking in production.

Does the component actually work (but it is just logging warning messages in the console)?

If you are using babel, you can look into: https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types and https://github.com/jamiebuilds/babel-react-optimize

I am going to see if there's a way to fix this. I'm not sure why passing the startDate and endDate as a string is logging that message. Perhaps the message will go away if you do the following instead (untested):

class DateSelection extends React.Component{
  render() {
    return (
      <DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
        <button>Click Me To Open Picker!</button>
      </DateRangePicker>
    );
  }
}
diego-betto commented 6 years ago

temporarily fixed by changing

import * as DateRangePicker from 'react-bootstrap-daterangepicker';

to

const DateRangePickerImport = require('react-bootstrap-daterangepicker');
const DateRangePicker = DateRangePickerImport.default;
skratchdot commented 4 years ago

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater