Currently, I am using Webpack 2, Bootstrap 3, and TypeScript in my project. My goal is to integrate npm and packaged bundles into an existing application seamlessly. To achieve this, I have utilized the ProvidePlugin to ensure jQuery is accessible and the expose-loader to expose jQuery to external dependencies.
Initially, I faced challenges with configurations involving
(<any> global).$ = global.jQuery = $;module: { rules [{}] }, however, I managed to find success with the following setup:
plugins: ([
// allow usage of jquery outside webpack modules
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
}),
]),
In my entry file, entry.ts:
import "expose-loader?$!jquery"
import "expose-loader?jQuery!jquery"
Despite setting up everything correctly, when attempting to use import "bootstrap", I encountered issues where $(...).popover() worked within my module, but $(...).popover resulted in an error outside the module:
Uncaught TypeError: $(...).popover is not a function
I am seeking advice on how to make jQuery methods, such as the bootstrap popover method, available globally outside of my modules?