RequireJS does not work with jQuery Shim'ed plugins

Question

Plugins almost always insist on loading before jQuery. And they should not do this because of my use of the gasket settings.

In my main.js, I have the following settings:

requirejs.config({ paths: { 'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min', 'bootstrap': '../bootstrap/js/bootstrap.min', 'select2': 'vendor/select2', 'jshashtable': 'vendor/jshashtable-2.1', 'jquery.numberformatter': 'vendor/jquery.numberformatter-1.2.3.min', 'jq-datepicker': 'vendor/bootstrap-datepicker', 'jq-datepicker.da': 'vendor/bootstrap-datepicker.da' }, // Use shim for plugins that does not support ADM shim: { 'bootstrap': ['jquery'], 'select2': ['jquery'], 'jq-datepicker': ['jquery'], 'jshashtable': ['jquery'], 'jquery.numberformatter': ['jquery', 'jshashtable'] }, enforceDefine: true }); 

Later in this file I have the following:

 // Start the main app logic. requirejs(['jquery', 'bootstrap', 'jq-datepicker'], function ($) { console.log('Require.JS loaded'); // Init datepickers // Docs: https://github.com/eternicode/bootstrap-datepicker $('.datepicker').datepicker({ format: 'dd/mm/yyyy', language: 'da', keyboardNavigation: false, autoclose: true }); }); 

But I get this error all the time:

 Uncaught TypeError: undefined is not a function bootstrap.min.js:6 (anonymous function) bootstrap.min.js:6 (anonymous function) 

And I see on my Chrome Network tab that it loads before jQuery.

Now I tried adding enforceDefine: true after looking here in stackoverflow, but no luck. I tried moving requirejs.config to my html page. And I tried loading jQuery from a local file. All without luck.

What am I missing?

Answer 1

Did you run jquery too?

 shim: { jQuery: { exports: 'jquery' }, 'bootstrap': { exports : 'jquery' }, 'select2': { exports :'jquery' }, ... }, 

Answer 2

Isn't that the $ you want to export?

 shim: { 'jquery': { exports: '$' }, 'jqueryuitouchpunch': { deps: ['jqueryui'] }, } 

Answer 3

Try:

 shim: { 'bootstrap': { exports : 'jquery' }, 'select2': { exports :'jquery' }, ... }, 

Answer 4

Just make sure you load jQuery before your plugin using define:

 // Start the main app logic. requirejs(['jquery', 'bootstrap'], function ($) { define(['jq-datepicker'], function() { $('.datepicker').datepicker({ format: 'dd/mm/yyyy', language: 'da', keyboardNavigation: false, autoclose: true }); }); });