load blue-imp jquery fileupload with RequireJS

Question

I'm trying to load the jquery fileupload by blue-imp with RequireJS.

I'm facing some problem while loading it. I tried the solutions like this and this but none worked with my situation.

what i did in my main.js is

require.config({
    baseUrl : 'js',
    paths: {
        jquery: 'lib/jquery/jquery-1.11.0',
        jqueryfileupload : 'lib/jquery/jquery.fileupload',
        underscore: 'lib/backbone/underscore/underscore-min',
        backbone: 'lib/backbone/backbone-min',
    },
    shim : {        
    'underscore' : {
        exports : "_"
    },
    'backbone' : {
        deps : [ "underscore", "jquery" ],
        exports : "Backbone"
    },
    'jqueryFileUpload' : {
        deps : ["jquery"]           
    }
});

in my view when i'm laoding it

define(['backbone', 'jqueryFileUpload' ],
        function(Backbone, fileupload ) {

});

It's giving me error on console

"NetworkError: 404 Not Found - http://localhost/AppUI/js/jqueryFileUpload.js?cmmn=1409151733588"

Why it's picking backbone from its correct path and why jqueryFileUpload from baseURL directly?

I'm able to perform normal jquery operations like val(), append() but this one has dependency so i provided it.

I researched a bit more and found out the nested dependencies for fileupload.js which are jquery ui and widget. I also imported them in my

        paths : {
            jquery: 'lib/jquery/jquery-1.11.0',
            jqueryUI : 'lib/jquery/jquery-ui-1.10.4.custom.min',
            jqueryfileupload : 'lib/jquery/jquery.fileupload'
        },

       shim : {
           'jqueryUI' : ['jqueryUI'],
           'jqueryFileUpload' : {
                  deps : ["jquery", "jqueryUI", "jqueryIframetransport"],
                  exports : "jQueryFileUpload"
        }
}

Even after this i'm getting the same error. It's picking up the wrong path.

Any suggestions or approaches to proceed ahead?

Answer 1

You can not use shim config with jquery fileupload for that reason (shim config):

//Remember: only use shim config for non-AMD scripts,
//scripts that do not already call define(). The shim
//config will not work correctly if used on AMD scripts,
//in particular, the exports and init config will not
//be triggered, and the deps config will be confusing
//for those cases.

Jquery file upload source files already use define (AMD) scripts! (look at jquery.fileupload.js) Even so you can configure the requirejs dependencies this way:

top level project directory (bower compatible):

* app/
    - modules/
        - module.js
    - vendor/
        - jquery/
            - dist/
                - jquery.js
        - underscore/
            - underscore.js
        - jquery.fileupload-upload/
            - vendor/
                - jquery.ui.widget.js
            - js/
                - jquery.fileupload.js
                - jquery.fileupload.image.js.
                - ...

config.js:

var require = {
    "baseUrl": "/app/",
    "shim": {
        jquery: {
            exports: "$"
        },
        underscore: {
            exports: "_"
        }
    },
    "paths": {
        "jquery": "vendor/jquery/dist/jquery.min",
        "jquery.ui.widget": "vendor/jquery-file-upload/js/vendor/jquery.ui.widget",
        "underscore": "vendor/underscore/underscore-min",
        "bootstrap": "vendor/bootstrap/dist/js/bootstrap.min",
        "tmpl": "vendor/blueimp-tmpl/js/tmpl",
        "load-image": "vendor/blueimp-load-image/js/load-image",
        "load-image-meta": "vendor/blueimp-load-image/js/load-image-meta",
        "load-image-exif": "vendor/blueimp-load-image/js/load-image-exif",
        "load-image-ios": "vendor/blueimp-load-image/js/load-image-ios",
        "canvas-to-blob": "vendor/blueimp-canvas-to-blob/js/canvas-to-blob",
        "jquery.iframe-transport": "vendor/jquery-file-upload/js/jquery.iframe-transport",
        "jquery.fileupload": "vendor/jquery-file-upload/js/jquery.fileupload",
        "jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process",
        "./jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process",
        "jquery.fileupload-image": "vendor/jquery-file-upload/js/jquery.fileupload-image",
        "jquery.fileupload-audio": "vendor/jquery-file-upload/js/jquery.fileupload-audio",
        "jquery.fileupload-video": "vendor/jquery-file-upload/js/jquery.fileupload-video",
        "jquery.fileupload-validate": "vendor/jquery-file-upload/js/jquery.fileupload-validate",
        "jquery.fileupload-ui": "vendor/jquery-file-upload/js/jquery.fileupload-ui",
    }
};

module:

define(['jquery',
'tmpl',
'load-image',
'load-image-meta',
'load-image-exif',
'canvas-to-blob',
'jquery.iframe-transport',
'jquery.fileupload',
'jquery.fileupload-process',
'jquery.fileupload-image',
'jquery.fileupload-audio',
'jquery.fileupload-video',
'jquery.fileupload-validate',
'jquery.fileupload-ui'],

function ($, ...) {

Answer 2

Your configuration inconsistently refers to your module with the name jqueryfileupload (in your paths) and with jqueryFileUpload (in your shim, and in your call to define). You could change your paths to usejqueryFileUpload so that it is consistent everywhere.

When you tell RequireJS about a module, you should refer to it by the same name everywhere. As far as RequireJS is concerned, foo, FOO, Foo, FoO are all different modules.