Why do I need a special “hack” for jQuery when using Bootstrap with Webpack

Question

My original question was solved by reading this thread , but since I want to understand the whole webpack system, I ask myself:

Why do I have to do this? (Import jQuery myself and explicitly include it in some way in the webpack config)

Shouldn't webpack find jQuery as a dependency of bootstrap and add it, when I import bootstrap? I just don't understand why there is so much happening automagically, but this is breaking without me hacking something into my webpack config.

This is basically my setup:

• cloned the angular2 seed which uses webpack: https://github.com/angular/angular2-seed

• installed bootstrap package: npm install bootstrap --save ( => "bootstrap": "^3.3.7")

• imported the bootstrap css in my app.component.ts: import 'bootstrap/dist/css/bootstrap.css';

The css seems to be imported just fine, but I get this "Uncaught ReferenceError: jQuery is not defined" (at run time) which also appears in the thread mentioned above.

My question is admittedly a similar one to this one but I don't think the answers have been really convincing.

When modules use jQuery, shouldn't they import jQuery in some way?

Or, asked in another way: If I get this runtime error, doesn't it mean the contrib module's devs worked a bit dirty?

Please consider that I am

• new to 1. stackoverflow, 2. webpack

• quite new to modular JavaScript

• not interested in a concrete problem being solved, rather than in general enlightenment regarding this topic

Thanks in advance

Cheers Sören

Answer 1

I agree. The bootstrap PR #16534 CommonJS: require() jQuery if not already loaded tried to change the behaviour (ie, automatically require jQuery unless present), but has been closed since no more development is happening for bootstrap 3.