$(…).datetimepicker is not a function

Question

I use webpack and want to use bootstrap-datetimepicker. In my webpack config I use ProvidePlugin to get \"jquery module\".

In my code I get error $(.

Answer 1

One way of making the changes for $.fn persistent (without editing the source) is to use expose plugin in combination with imports:

module : {
    loaders : [
            {
                test : /jquery/,
                loader : 'expose-loader?$!expose?jQuery'
            },
            {
                test : /eonasdan-bootstrap-datetimepicker/,
                loader : 'imports-loader?define=>false,exports=>false,moment=moment'
            }]
}

What exactly do these arguments for imorts loader do?

When you look at the source, it starts with

'use strict';
if (typeof define === 'function' && define.amd) {
    // AMD is used - Register as an anonymous module.
    define(['jquery', 'moment'], factory);
} else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'), require('moment'));

and then proceeds

} else {
// Neither AMD nor CommonJS used. Use global variables.

This part define=>false,exports=>false prepends a piece of JavaScript that sets both define and exports (inside wrapped module definition) to false, allowing it to proceed to the "use the globals" part, which is exactly what we want. moment=moment tells it to set a variable moment equal to require('moment'), now when the datepicker tries to resolve the libraries from the globals, it reaches to the var moment=... definition. If you plan to include moment from the globals (not as npm dependency), you should omit this argument.