import Blueimp jQuery File Upload in webpack

Question

i'm importing file like this

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";

and altered webpack config with

resolve: {
    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',
        'load-image-scale': 'blueimp-load-image/js/load-image-scale.js',
        'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
        'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
    }
}

inspired by this: How to use blueimp-file-upload with webpack?

it is compiling ok, but i get error in browser console

app.js:1391 TypeError: $(...).fileupload is not a function

jQuery is defined globally looks like fileupload plugin is not registered. i don't get it.

Novotny

Did you solve this by chance? Having the same problem. – Mosra

Answer 1

I too had a difficult time trying to get this to work. I gave up on import statements and used require instead. At first, I tried to use imports-loader with require. Before I forget, I think you can solve your immediate problem by adding the following to your webpack.config.js in the appropriate place:

module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": 'jquery'
    })      
]);

This caused me other issues as I already had jQuery loaded as a static asset on the site, and my module was being injected within it.

But back to my resolution to avoid all of this pain.

With imports-loader, the problem is the load order of dependencies and I couldn't get webpack and babel to behave. Then I discovered script-loader

Install script-loader

> npm install --save-dev script-loader

I was then able to remove my alias resolves as they were no longer needed. Working like a charm. Would love to hear any suggestions on a better method.

Example: main.js

require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('script-loader!blueimp-tmpl/js/tmpl.js');
require('script-loader!blueimp-load-image/js/load-image.all.min.js');
require('script-loader!blueimp-canvas-to-blob/js/canvas-to-blob.js');
require('script-loader!blueimp-file-upload/js/jquery.iframe-transport.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-process.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-image.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-audio.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-video.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-validate.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-ui.js');

Mosra

Thank you! This worked for me. Just copy paste and it worked. – Adne

I'd love to know why this is needed, for a modern and maintained library... nonetheless, thank you :) – Whirlwind