Exception when using react-events with browserify

[laliluna]

Hi,

when using react-events with browserify, I get the exception

ReferenceError: $ is not defined

The reason is simple: the code assumes that $ is part of the global namespace. With browserify you rely on explicit require statements.

Workaround

Load query into the global namespace for example by adding a script tag in the web page.

Solution

Can the function(React) method be changed to function(React, $)

I could then change Mixins(React) to Mixins(React, jquery)

Sample code:

var React = require('react');
var Mixins = require('react-mixin-manager')   
var Events = require('react-events');
Mixins(React);

// could be
// var jquery = require('query');
// Mixins(React, jquery)
React.mixins.add('events', Events(React));

var MyButton = React.createClass({
render: function(){
    return (<input type="button" value="Hello World"></input>);
},
events: {
    'dom:click': 'onClick'
},
mixins: ['events'],
onClick: function(x) {
    console.log('Button was clicked', x)
}
});
var BoardHome = React.createClass({
render: function() {
    return (<div>
        <MyButton />
    </div>)
}
});

React.renderComponent(<BoardHome />, document.getElementById('app'));

Best Regards

Sebastian

[jhudson8]

fixed with 0.5.1

An additional parameter (jquery) can be provided to react-events. This parameter is only required if using DOM event bindings and may be left out otherwise.

require('react-events')(require('react'), require('jquery'));