RequireJS not working with Shim'ed jQuery plugins

Question

The plugins almost always insist on loading before jQuery. And they should not do this due to my use of the shim setting.

In my main.js i have these 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 can see in my Chrome Network tab that it is loaded before jQuery.

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

What am I missing?

Answer 1

Did you shim jquery too?

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

Answer 2

Isn't it $ you want to export ?

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

Answer 3

Try:

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

Answer 4

Just ensure 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
    });
  });

});