2

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.

6
  • 1
    Can you show us your code which cause the problem (with link to your exact libraries) or reproduce the problem in a fiddle? Commented Dec 19, 2013 at 10:04
  • I have used jquery-file-upload with no problem at all with requirejs. perhaps you can show your require.config and the code?
    – Ian Lim
    Commented Dec 19, 2013 at 13:02
  • @mallim This is good to know. I'll post the offending code, I'm sure it's just something I'm overlooking.
    – Matt
    Commented Dec 19, 2013 at 16:13
  • @Fractaliste Here's the code, let me know if I can provide anything else. Thanks for having a look.
    – Matt
    Commented Dec 19, 2013 at 16:18
  • Is your JavaScript code alone on that page or is something else also loading jQuery? If the latter, it could be the explanation for your troubles.
    – Louis
    Commented Dec 22, 2013 at 15:48

3 Answers 3

1

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.

2
  • What did you end up doing to solve this with the .min version? Commented Feb 19, 2014 at 17:07
  • I removed all the references to the extensions and dependencies. I now just include the 'jquery.fileupload-ui' file. Everything is minified in.
    – Matt
    Commented Feb 20, 2014 at 1:47
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'
            });
        }
);
0

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)

2
  • The version of jquery shouldn't be the issue here. The plugin actually works just fine, but randomly not all of the dependencies are loaded before it executes the callback in the require().
    – Matt
    Commented Dec 19, 2013 at 16:45
  • I still get errors like this: Uncaught TypeError: Object [object Object] has no method 'fileupload' on every few visits to the page.
    – Matt
    Commented Dec 19, 2013 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.