RequireJS not working with Shim'ed jQuery plug

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?

回答1:

Did you shim jquery too?

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

回答2:

Isn't it $ you want to export ?

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

回答3:

Try:

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

回答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
    });
  });

});