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?

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?

• javascript
• jquery
• twitter-bootstrap
• browserify

• 1 If I had to guess, changing the 'jquery': '$' to 'jquery': 'jQuery' might help. However, I'd love to know the answer for certain. – 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 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 Commented Jul 15, 2014 at 5:31
• just use this window.jQuery = require('jquery.js'); – Roman M. Koss Commented Sep 4, 2015 at 16:53

3 Answers 3

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. :)

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);

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.