The jquery.fileupload plugin causes require.js to randomly fail imports

Question

I'm using require.js and have a page with an from that used jquery.fileupload. After introducing the plugin I now see some files fail to be imported before the define call back is executed. This causes random errors where the libraries can't find their dependencies. It's as though require.js is moving on before all the dependencies can be resolved.

I've followed these instructions:

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-use-jQuery-File-Upload-with-RequireJS

But beyond that it's a very vanilla install. I'm using the minified versions of libraries where possible. Any insight is welcome.

here's the main.js:

(function () {                                                                          
  'use strict';                                                                         

  require.config({                                                                      
    baseUrl: '/js',                                                                     
    waitSeconds: 800,                                                                   
    paths: {                                                                            
      jquery: ['//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min',               
        'lib/jquery/jquery-2.0.3.min'],                                                 
      'jquery.fileupload': 'lib/jquery.fileupload/jquery.fileupload',                   
      'jquery.fileupload-ui': 'lib/jquery.fileupload/jquery.fileupload-ui',             
      'jquery.fileupload-image': 'lib/jquery.fileupload/jquery.fileupload-image',       
      'jquery.fileupload-validate': 'lib/jquery.fileupload/jquery.fileupload-validate', 
      'jquery.fileupload-video': 'lib/jquery.fileupload/jquery.fileupload-video',       
      'jquery.fileupload-audio': 'lib/jquery.fileupload/jquery.fileupload-audio',       
      'jquery.fileupload-process': 'lib/jquery.fileupload/jquery.fileupload-process',   
      'jquery.ui.widget': 'lib/jquery.ui/jquery.ui.widget',                             
      'jquery.iframe-transport': 'lib/jquery.iframe-transport/jquery.iframe-transport', 
      'load-image': 'lib/load-image/load-image.min',                                    
      'load-image-meta': 'lib/load-image/load-image-meta',                              
      'load-image-exif': 'lib/load-image/load-image-exif',                              
      'load-image-ios': 'lib/load-image/load-image-ios',                                
      'canvas-to-blob': 'lib/canvas-to-blob/canvas-to-blob.min',                        
      tmpl: 'lib/tmpl/tmpl.min',                                                        
      bootstrap: 'lib/bootstrap/bootstrap',                                             
      bootstrapTab: 'lib/bootstrap/bootstrap-tab',                                      
      EventEmitter: 'lib/event_emitter/EventEmitter',                                   
      linkedin: ['//platform.linkedin.com/in.js?async=true',                            
        'http://platform.linkedin.com/in.js?async=true'],                               
      skinny: 'lib/skinny/skinny',                                                      
      selectize: 'lib/selectize/selectize.min',                                         
      sifter: 'lib/sifter/sifter',                                                      
      microplugin: 'lib/microplugin/microplugin.min'                                    
    },                                                                                  

    shim: {                                                                             
      bootstrap: {                                                                      
        deps: ['jquery'],                                                               
      },                                                                                
      bootstrapTab: {                                                                   
        deps: ['jquery', 'bootstrap'],                                                  
      },                                                                                
      linkedin: {                                                                       
        exports: 'IN'                                                                   
      },                                                                                
      selectize: {                                                                      
        deps: ['jquery', 'sifter', 'microplugin']                                       
      },                                                                                
      'jquery.iframe-transport': {                                                      
        deps: ['jquery']                                                                
      }                                                                                 
    }                                                                                   
  });                                                                                   
  require(['app'], function (App) {                                                     
    App.initialize();                                                                   
  });                                                                                   
}());

And the from code:

define([], function () {
  'use strict';

  return function () {
    require(['jquery', 'tmpl', 'load-image', 'canvas-to-blob',
  'jquery.iframe-transport', 'jquery.fileupload-ui'], function ($) {

      $('#product').fileupload({
        url: '/products/create'
      });
    });
  };
});

The module gets called after the page has been loaded.

It's also worth noting that all files are downloaded successfully. No 404's, etc.

Answer 1

The Answer from matt is the best solution in this case. Thanks a million, it save us a lot of time. In requirejs.config, you have to add the load-image dependecies separatly - file by file. For example:

require.config({
        'jquery.ui.widget' : 'lib/jQuery-File-Upload-9.9.2/js/vendor/jquery.ui.widget',            
        'jquery.fileupload':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload',
        'jquery.fileupload-ui': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-ui',
        'jquery.fileupload-image': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-image',
        'jquery.fileupload-validate':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-validate',
        'jquery.fileupload-audio':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-audio',
        'jquery.fileupload-video':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-video',
        'jquery.fileupload-process': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-process',
        'jquery.fileupload-jquery-ui': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-jquery-ui',
        'jquery.iframe-transport': 'lib/jQuery-File-Upload-9.9.2/js/jquery.iframe-transport',
        'load-image':'lib/load-image-1.10.0',
        'load-image-meta':'lib/load-image-meta-1.10.0',
        'load-image-ios':'lib/load-image-ios-1.10.0',
        'load-image-exif':'lib/load-image-exif-1.10.0',
        'canvas-to-blob':'lib/canvas-to-blob-2.0.5',
        'tmpl':'lib/tmpl.2.4.1'
    }
});

call in html site:

requirejs(['jquery',
            'jquery.ui.widget',
            'tmpl',
            'load-image',
            'jquery.iframe-transport',
            'jquery.fileupload-ui'], function () {
                $('#fileupload').fileupload({
                    url: 'photo-upload.html'
            });
        }
);

Answer 2

It turns out there is a flaw in the minified version of load-image.js that breaks how the dependencies load. I don't have exact proof as to why, it could be the smaller size causes a race condition, or it could be something weird in that particular file. What I do know is the minified version causes the random errors and the normal version does not (this is off master so I suppose I was taking a risk).

I raised a flag here

EDIT: it turns out the minified version of the plugin includes all the extensions which explains the odd dependency behavior.

Answer 3

One possibility modify the shim:

   shim: {                                                                             
      bootstrap: {                                                                      
        deps: ['jquery'],                                                               
      },                                                                                
      bootstrapTab: {                                                                   
        deps: ['jquery', 'bootstrap'],                                                  
      },                                                                                
      linkedin: {                                                                       
        exports: 'IN'                                                                   
      },                                                                                
      selectize: {                                                                      
        deps: ['jquery', 'sifter', 'microplugin']                                       
      },                                                                                
      'jquery.iframe-transport': {                                                      
        deps: ['jquery']                                                                
      },
      'jquery.fileupload-ui':{
        deps: ['jquery']   
      } 

Another option downgrade jquery to 1.X (this is because the sample page is using jquery 1.X)