Sathya Sathya - 4 years ago 463
HTML Question

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

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 Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download