How to implement react-date-range picker with webpack module bundler?

Question

I'm struggling to implement react date range picker with webpack module bundler. I've followed one of the npm react components for date range picker (https://www.npmjs.com/package/react-date-range). If I try to implement with webpack I've got one error. That is, "Uncaught TypeError: type.toUpperCase is not a function". Please check my below code what i have tried so for,

var React  = require('react');
var DateRange = require('react-date-range');

var Calendarcomponent = React.createClass({
  handleSelect:function(range){
    console.log(range);
  },
  render:function(){
      return (
        <div>
          <DateRange
            onInit={this.handleSelect}
            onchange={this.handleSelect}
          />
        </div>
      )
  }
});

module.exports = Calendarcomponent;

Answer 1

DateRange is not the default export from the react-date-range package.

In the example, note the destructured syntax during the import:

import { DateRange } from 'react-date-range'

You would rewrite this in ES5 ala:

var DateRange = require('react-date-range').DateRange

Answer 2

you have to use the react-date-range as mentioned below

var DateRange = require('react-date-range').DateRange;