Exposing jquery plugin with Webpack

Question

I'm trying to use bootstrap-daterangepicker with Webpack. In my view file I have the following:

define(function (require) {
    require('bootstrap-daterangepicker');

    $('#daterangepicker').daterangepicker({ ... });
});

And in webpack.config.js:

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })
]

This results in daterangepicker is not a function. I've taken a look at daterangepicker.js, and it seems that $.fn.daterangepicker is not exported correctly. How would I do this? I've tried using imports-loader to force import jQuery, but that didn't help.

Note that daterangepicker has a line like `jQuery = require('jquery');`. I have a feeling it might bind the plugin to wrong instance of jQuery due to this. In case you don't bundle jQuery, you should set up [externals](https://webpack.github.io/docs/configuration.html#externals). — Juho Vepsäläinen, Apr 27 '15 at 06:19
How would I use `externals`? I was thinking something like `externals: { 'bootstrap-daterangepicker': '$' }`, but that doesn't work unfortunately. — spacek33z, Apr 27 '15 at 09:25
If you have just `externals: {jquery: true}` it will treat jQuery as an external and won't include it the bundle. In that case your datepicker will hook it up through global by the looks of it. — Juho Vepsäläinen, Apr 27 '15 at 09:42
Hm that does not work. It looks like bootstrap-daterangepicker does use the correct jQuery, because it is not included in the package. I think the error is purely in the exporting `$` part. Thanks anyway :). — spacek33z, Apr 27 '15 at 09:57
I found [an answer](https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack) with some extra strategies. Maybe one of those will do the trick. — Juho Vepsäläinen, Apr 27 '15 at 10:19

spacek33z · Accepted Answer · 2016-08-28T18:24:23.430

29

Apparently bootstrap-daterangepicker tries to load his own jQuery. Therefore $.fn.daterangepicker is not available in 'my' jQuery. I've forced bootstrap-daterangepicker to include my jQuery with this line in webpack.config.js:

resolve: {
    alias: {
        'jquery': require.resolve('jquery'),
    }
}

edited Aug 28 '16 at 18:24

answered Jun 04 '15 at 15:23

spacek33z

2,203
1
25
31

1

This resolved my issue with `devbridge-autocomplete` too, thanks – Nate Mar 01 '18 at 12:20
OMG. Thanks so much. You are saved my night. – Andy Oct 19 '19 at 00:39
Worked for me!! Should be added to the officiel daterangepicker doc – alxb Jun 01 '20 at 10:13

score 1 · Answer 2 · edited May 23 '17 at 12:34

The webpack 'resolve' option didn't help me but @spacek33z comments lead me to realize that my Angular component's linked element wasn't a jQuery element but an ordinary DOM element. The reason why was that Angular was using its own jqLite vs. the real jQuery.

Searching for why Angular wasn't finding the real jQuery I found the question 'Webpack: how to make angular auto-detect jQuery and use it as angular.element instead of jqLite?' that helped me realize Angular needs window.jQuery.

So this seems to be the proper webpack.conf.js incantation for me:

new webpack.ProvidePlugin({
         'jQuery': 'jquery',
  'window.jQuery': 'jquery',
         'jquery': 'jquery',
  'window.jquery': 'jquery',
         '$'     : 'jquery',
  'window.$'     : 'jquery'
}),

Exposing jquery plugin with Webpack

2 Answers2

Linked