How to use blueimp-file-upload with webpack?

Question

I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.

I installed blueimp-file-upload and jquery.ui.widget from NPM

npm install --save blueimp-file-upload
npm install --save jquery.ui.widget

and I require blueimp-file-upload in my entry file

require('blueimp-file-upload')

but when I run webpack, I get thie error:

ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
@ ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19 

Answer 1

If you're working with images:

Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:

Install missing dependencies:

npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob

Configure Webpack:

config.resolve = {
   extensions: ['', '.js'],
   alias: {
      'load-image': 'blueimp-load-image/js/load-image.js',
      'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
      'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
      'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
      'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
   }
};

Include scripts in your app:

import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";