expose-loader doesn't expose modifications to exposed object

Question

I'm using Webpack 2, Bootstrap 3, and TypeScript, and attempting to integrate npm and packaged bundles into an existing application. I'm using ProvidePlugin to make jQuery available, and expose-loader to expose jQuery to external dependencies.

(Any combination of (<any> global).$ = global.jQuery = $; or webpackmodule: { rules [{}] } configurations wouldn't work, but eventually I got the following to work:

plugins: ([
    // make sure we allow any jquery usages outside of our webpack modules
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery"
    }),
]),

entry.ts:

import "expose-loader?$!jquery"
import "expose-loader?jQuery!jquery"

However, when I then try and call import "bootstrap" I can call $(...).popover() within my module, and I can call $(...) or jQuery(...) outside the module, but I can't call $(...).popover outside the module, instead I get this error:

Uncaught TypeError: $(...).popover is not a function

How do I make methods that are added to jQuery (like the bootstrap popover method) available in the global scope, outside of my modules?

Answer 1

I found my issue: PluginProvider was exposing a different version of jQuery to the application than expose-loader was exposing. Bootstrap was initializing on the PluginProvider jQuery, but a different instance of jQuery was being exposed to the window.

So to make it work, delete PluginProvider and just use the expose-loader. And manually import jQuery where you need it as a side-effect of losing PluginProvider.