如何使用webpack模块捆绑器实现react-date-range picker？

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

你必须使用如下所述的react-date-range

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