Providing jquery plugin with webpack

Question

I am trying to use bootstrap-daterangepicker using 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' }) ] 

The result is daterangepicker is not a function . I looked at daterangepicker.js and it seems that $.fn.daterangepicker not exporting correctly. How can I do it? I tried using imports-loader to force jQuery import, but that didn't help.

Answer 1

Apparently bootstrap-daterangepicker trying to load its own jQuery. Therefore $.fn.daterangepicker not available in 'my' jQuery. I made bootstrap-daterangepicker include my jQuery with this line in webpack.config.js:

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

Answer 2

The solution parameter in webpack did not help me, but @ spacek33z's comments made me realize that my component associated with the Angular component was not a jQuery element, but a regular DOM element. The reason is because Angular used its own jqLite against real jQuery.

Searching why Angular did not find real jQuery, I found a Webpack question : how to make Angular automatically detect jQuery and use it as angular.element instead of jqLite? ', which helped me understand that Angular needs window.jQuery .

So this seems like the right webpack.conf.js spell to me:

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