CODEWITHSUNDEEP
jquerytwitter-bootstraprequirejs
Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

RequireJS not working with Shim'ed jQuery plugins

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?

Upvotes: 7

Views: 6186

Answers (4)

Arnaud Weil
Arnaud Weil

Reputation: 2502

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

});

Upvotes: 0

Rivenfall
Rivenfall

Reputation: 1273

Isn't it $ you want to export ?

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

Upvotes: 2

Mark Robson
Mark Robson

Reputation: 1328

Did you shim jquery too?

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

Upvotes: 5

asgoth
asgoth

Reputation: 35829

Try: 

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

Upvotes: 1

Related Questions