Error while trying to integrate React-DateRangePicker into React Project

Question

Currently in the process of building a web app using ReactJs and the Fluxible architecture. While trying to integrate the React-daterangepicker module into my project, I have encountered the following error of which I cannot trace the origin.

$.fn.daterangepicker = function(options, callback) {
                         ^
TypeError: Cannot set property 'daterangepicker' of undefined
    at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26

Here's my DatePicker Component, I have followed the github demo and done exactly the same steps.

'use strict';
var React = require('react/addons');
var moment = require('moment');
var DateRangePicker = require('react-bootstrap-daterangepicker');
import DefaultMixin from '../mixins/DefaultMixin';

module.exports = React.createClass({

    mixins: [DefaultMixin],

    render() {

        return (
            <DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
                <div>Click Me To Open Picker!</div>
            </DateRangePicker>
        );

    }

});

What could be causing this error? Googling it gave no result and I've been struggling with it for the past hours.

Answer 1

It seems like the react-bootstrap-daterangepicker module needs jQuery to be available globally as $. Try including jQuery on the page before you load the module.

Answer 2

TL;DR: this isn't a react problem, you need to load jQuery BEFORE loading your react files.

Lets deconstruct your error message:

$.fn.daterangepicker = function(options, callback) {
                     ^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26

I'm mostly interested in the first part Cannot set property 'daterangepicker' of undefined...

This is happening because $.fn is returning undefined.

Try This:

immediately before you require react, you should require jquery:

var $ = require('jquery');
var React = require('react/addons');