Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 655
Allan Kimmer Jensen Avatar asked Dec 18 '12 18:12

Allan Kimmer Jensen


2 Answers

Did you shim jquery too?

shim: {
    jQuery: {
       exports: 'jquery'
    },
    'bootstrap': {
       exports : 'jquery'
     },
    'select2': {
       exports :'jquery'
     },
     ...
},
like image 145
Mark Robson Avatar answered Sep 28 '22 14:09

Mark Robson


Isn't it $ you want to export ?

shim: {
        'jquery': {
            exports: '$'
        },
        'jqueryuitouchpunch': {
            deps: ['jqueryui']
        },
}
like image 34
Rivenfall Avatar answered Sep 28 '22 15:09

Rivenfall