Browserify & Reactify — Uncaught TypeError: Cannot read property 'EventEmitter' of undefined

[variable]

I have a reactjs component which renders sub components and I would like to use isotope to display the subcomponents.

Whenever I include isotope into my jsx file, will cause

Uncaught TypeError: Cannot read property 'EventEmitter' of undefined

I am not sure what is wrong here.

[desandro]

Sorry to hear you're having trouble with Isotope. Did you install Isotope as an npm package?

npm install isotope-layout

[variable]

Hi Desandro,

Yes, that's what I did. I use browserify and reactify to package things up. It's complaining from this line:

var originalGlobalValue = exports.EventEmitter;

And I discovered latter the 'undefined' in the packaged eventemitter code

    } else if (typeof module === 'object' && module.exports) {
        module.exports = EventEmitter;
    } else {
        exports.EventEmitter = EventEmitter;
    }
}).call(undefined);

After manually changing it to this and started to work

}).call(this);

For reference, this is the section in gulp:

gulp.task('libjs', function() {
    browserify({
        require: libjs,
    }).transform(babelify, {global:true}).transform(reactify, {global:true}).bundle().pipe(source('lib.js')).pipe(gulp.dest(paths.js_built));
})

this is the code I was intending to use:

var $ = require('app/common/jquery');
//var Isotope = require('isotope-layout');
var React = require('react');
var moment = require('moment');
var CompetitionStore = require('app/competitions/stores');
var CompetitionActions = require('app/competitions/actions');
var CompetitionEntries = React.createClass({
    getInitialState: function(){
        return CompetitionStore.getState();
    },
    componentDidMount(){
        CompetitionStore.listen(this.onChange);
        CompetitionActions.loadEntries(this.props.apiUrl, {competition_uuid:this.props.uuid});
        //this.isotope = new Isotope(
            //this.refs.entries, {
                //itemSelector: '.item',
                //percentPosition: true,
                //layoutMode: 'masonry',
                //position: 'relative',
            //}
        //);
    },
    componentWillUnmount(){
        CompetitionStore.unlisten(this.onChange);
    },
    onChange(state){
        this.setState(state);
    },
    componentDidUpdate(){
        // this.isotope.reloadItems();
    },
    render(){
        return(
            

            {
                $.map(this.state.entries, function (entry) {
                  return(
                    
                  );
                })
            }
            
        )
    }
});

[desandro]

Thanks for the code. I'm not sure how that .call(undefined) got added. It's .call(this) in EventEmitter and isotope.pkgd.js.

Hopefully this is just an edge case. I'll keep this issue open to see if others run into it.

[variable]

It seems babelify is causing this problem. If I don't include babelify, it didn't create .call(undefined); in the packaged code.

[manveru]

Same issue is happening with phoenix when you bower install isotope -S and try using it via the default brunch setup.

[scriptist]

I'm experiencing the same issue, also with babelify.

[levibotelho]

Have you tried depending explicitly on "wolfy87-eventemitter": "4.2.0"? I had this issue with an unrelated component that depended on wolfy87-eventemitter and in between 4.2.0 and the current version there is code that causes this error. Depending explicitly on 4.2.0 or using npm-shrinkwrap solved this problem.

[irisSchaffer]

+1 for requiring "wolfy87-eventemitter": "4.2.0" explicitly. Fixed the issue for us, using babelify!

[ariroseonline]

Having these issue as well with Browserify & Babelify (with React preset)...

Changing the wolfy87-eventmitter dependency is not a great long-term solution of course...

Any other proposed solutions?

[jedierikb]

It feels like eventemitter is the proper place to file this, but as this thread has traction... Tried to use browserify and babel (es2015) and got same error for latest version of eventemitter (5). Not using react. Dead simple setup -- just trying to browserify that library. Reverted to 4.2.0 from bower and working fine.

[desandro]

Isotope v3 was released and switched out the wolfy87-eventemitter dependency for ev-emitter. This issue should now be resolved.

[jedierikb]

Ah, nice to see a lightweight alternative. I will open a ticket on eventemitter for their outstanding issue.

[desandro]

Closing this issue as resolve as wolfy87-eventemitter has been replaced by ev-emitter with Isotope v3. Please open a new issue if you run into another issue with Browserify & Reactify 🌈🐻