Browserify jQuery is not defined?

Question

So I know how to manually fix this but it's annoying!

I included bootstrap dropdown.js and at the end of the function is

}(jQuery);

Inside my shim I set jquery as a dependency

'bootstrap': {
    "exports": 'bootstrap',
    "depends": {
        "jquery": '$'
    }
},

It seems like this is the only way to use $, but since the dropdown has jQuery at the end the console shows

ReferenceError: jQuery is not defined

}(jQuery);

Changing it to }($); works.

So my question is does anyone have any idea to better do this without manually doing it, or is manually editing the script the best?

If I had to guess, changing the 'jquery': '$' to 'jquery': 'jQuery' might help. However, I'd love to know the answer for certain. — Lotus
– Lotus, Commented Jun 21, 2014 at 20:00
will you please add some detail code over here.this is happen when jquery file we include is not proper. — Mahipat
– Mahipat, Commented Jul 14, 2014 at 15:30
@Mahipat it really can be a pain, I know how you feel. What I did was edit the actual plugin script. I don't prefer this method, but it works. Most plugins are written with a self invoking function (function($){ $.fn.function_name = function(x){}; })(jQuery); That code allows the jQuery keyword to be used with $, but for some reason I have to manually change (jQuery) to ($). I didn't give it much thought after it worked, but perhaps I should re think this. — Michael Joseph Aubry
– Michael Joseph Aubry, Commented Jul 15, 2014 at 5:31

bravocado · Accepted Answer · 2014-10-25 19:00:35Z

11

You can use global.jQuery = require("jquery")

This is my shim :

},
"plugin": {
    "exports": "plugin",
    "depends": [
        "jquery: $",
        "bootstrap: bootstrap"
    ]
}

and inside of plugin.js :

var $ = require('jquery')(window);
global.jQuery = require("jquery");
var bootstrap = require('bootstrap');
var plugin = require('plugin');

plugin();

it solve my problem. Hope it helps. :)

answered Oct 25, 2014 at 19:00

bravocado

1131 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Joseph Aubry Over a year ago

Thanks for sharing, I found if using $ does not work then using jQuery in the shim instead usually fixes it. Definitely going to refer to this if that ever fails.

joe.js Over a year ago

2018 and this still works. how can I setup a shim file like yours? and what are the advantages?

Faris · Accepted Answer · 2015-01-27 21:38:52Z

1

Shim
"./node_modules/jquery/dist/jquery.js": { "exports": "$" }

requiring
var jQuery = $ = require('$');

This should cover both plugins that use

(function($){
 $.fn.function_name = function(x){};
})($);

as well as

(function($){
  $.fn.function_name = function(x){};
})(jQuery);

answered Jan 27, 2015 at 21:38

Faris

5432 silver badges8 bronze badges

Comments

Michael Joseph Aubry · Accepted Answer · 2014-07-15 05:36:10Z

0

I don't think my solution is anywhere near optimal or ideal and it doesn't answer my question but if anyone has this issue just do it this way, you can get it working possibly as a temporary solution to get things going without stagnating on your project.

Most if not all jQuery plugins are written with a self invoking function like this.

(function($){
  $.fn.function_name = function(x){};

})(jQuery);

I simply went into the plugin itself and changed (jQuery) to ($)

(function($){
  $.fn.function_name = function(x){};

})($);

If you're still having problems, make sure you have a shim defined in your package.json file and you are including the jQuery plugin with a require statement.

answered Jul 15, 2014 at 5:36

Michael Joseph Aubry

13.7k17 gold badges77 silver badges141 bronze badges

Collectives™ on Stack Overflow

Browserify jQuery is not defined?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related