Ad

How To Implement React-date-range Picker With Webpack Module Bundler?

- 1 answer

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;
Ad

Answer

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
Ad
source: stackoverflow.com
Ad