Browserify: using jQuery plugins with browserify: jQuery is not defined

[connor11528]

I am trying to use browserify with jQuery and a jQuery plugin like so:

var $ = require('jquery');
require('./lib/stellar.jquery')

$(function(){
    $.stellar();
});

I build the final file using gulp (not sure if this matters):

gulp.task('browserify', function(){
    return browserify({
            entries: ['./js/main.js']
        })
        .bundle()
        .on('error', function (err) {
            console.log(err.toString());
            this.emit('end');
        })
        //Pass desired output filename to vinyl-source-stream
        .pipe(source('bundle.js'))
        // Start piping stream to tasks
        .pipe(gulp.dest('./build/'));
});

Anyway when I run in the browser this last line from the stellar.jquery.js file throws a "jQuery is not defined" error:

...
    // Expose the plugin class so it can be modified
    window.Stellar = Plugin;
}(jQuery, this, document));

What's the best way to use jQuery plugins with browserify?

[adamjgrant]

I think you need Browserify Shim

[domenic]

You should just do global.jQuery = require("jquery").

[imbuks]

@domenic You my friend are awesome!

[ankurp]

Was this resolved. Running into same issue even with shim. I have this in my shim

"jquery": "jquery:jQuery"

[giannif]

jQuery-bridget worked for me, though the plugin I was using is CommonJS compatible, and didn't need to be "shimmed".

import $ from "jquery";
import jQueryBridget from "jquery-bridget"
import Masonry from 'masonry-layout';
// make Masonry a jQuery plugin
$.bridget( 'masonry', Masonry );

[bcgoodmate]

You should just do global.jQuery = require("jquery").

This one still works!!