RequireJS shim paths for jQuery Plugin

Question

I'm new to RequireJS, and I'm trying to load a plugin using the shim technique. Ideally I'd like to keep the plugin in a different directory as well.

No matter what I do, I get a script error (even when the plugins are in the base directory.) Here's my RequireJS config. picker.date.min requires picker.min

require.config({
    baseUrl: '/js',
    paths: {
        jquery:        'vendor/jquery/jquery-2.0.3.min',
        pickadate:     'vendor/pickadate/picker.min',
        pickadatedate: 'vendor/pickadate/picker.date.min'
    },
    shim: {
        jquery: {
            exports: '$'
        },
        pickadate:     ['jquery'],
        pickadatedate: ['jquery', 'pickadate']
    }
});

Here's the script I use on my page

require(['jquery', 'pickadate', 'pickadatedate'], function($) {

    $('#start_date').pickadate();

});

The error I get is: GET http://domain.com/js/pickadate.js 500 (Internal Server Error) require-jquery.js:1854 Uncaught Error: Script error

Can anyone help?

Answer 1

jquery is already AMD compatible so you don't need shim for it. Also pickadatedate doesn't need to dependency on jquery because it is already implied by being dependent on pickadate. You shim can be simplified as:

shim: {
    pickadate:     ['jquery'],
    pickadatedate: ['pickadate']
}

However this change is not going to solve your problem. The error you mentioned is actually not typically caused by missing scripts. If requirejs wasn't able to locate the script then you would also see 404 GET requests in console (use Ctrl + Shift + I in Chrome). If you are not seeing 404 GET then missing script is likely not issue.

The error you mentioned typically means one or more scripts has some kind of syntax error that fails to load by JavaScript interpreter. That is, requirejs did found the script but when it tried to load it, it failed because of compilation or runtime issues.

The best way to find out the culprit script is by starting dev tools such as those available in Chrome and see the point of exception and values set in exception and any variables around it. If you don't see it then turn on the Break on Errors (see JavaScript: Is there a way to get Chrome to break on all errors? ). This will cause Chrome debugger to break as soon as the error occurs. If the error is not script error then continue until you stop at above error.

Generally when I get above error, I just look at the last code I'd typed and I usually find some syntax error (BTW, I highly recommend "use strict"; and jslint to detect this even faster.

Answer 2

You must have solved this by now but for others who come here, the problem IS your paths. Try using relative paths instead, I had the same issue and that fixed it for me. Something like this:

paths: {
    jquery:        '../vendor/jquery/jquery-2.0.3.min',
    pickadate:     '../vendor/pickadate/picker.min',
    pickadatedate: '../vendor/pickadate/picker.date.min'
},