$(...).tooltip is not a function using bootstrap 4 in npm webpack

Question

I can't seem to get tooltips working in bootstrap 4 using npm webpack.

I've just installed these node vendors...

$ npm install jquery
$ npm install bootstrap
$ npm install popper.js --save

And I am requiring vendors like so...

global.jQuery = require('jquery/dist/jquery.min.js');

require('bootstrap/dist/js/bootstrap.js');
require('popper.js/dist/popper.min.js');

I've tried both the dist and src for bootstrap and popper.js.

I am calling the tooltips function like this after the required vendors.

(function ($) {

    // enable tooltips for everything
    $('[data-toggle="tooltip"]').tooltip();

})(jQuery);

And I am always getting this error...

Other bootstrap javascript functions work like modals etc.

If you want to test my exact setup, download a test project here and just run npm install and then npm run production and see the index.html for error.

Answer 1

Either import required plugins separately, or load all:

require('bootstrap');

Everything is well explained in the official documentation.

Also many plugins depend on the $ symbol, so it's good to alias this one too:

global.jQuery = global.$ = require('jquery');

Answer 2

I wasted entire day on this, trying to load bootstrap v4-alpha.5 with all kinds of Webpack plugins to no avail.
It turns out, after I switched to preset-env bootstrap started "bringing in" its own version of jQuery v3.6 (actually Webpack, by reading boostrap's dependencies), which was different than what I had in package.json, so consequently only that jQuery got amended with bootstrap's plugins (util, alert, button, carousel, tooltip, popover, ...).

The solution was to make sure that bootstrap's jQuery resolves to the version I'm using, which was accomplished by adding this entry to package.json:

  "resolutions": {
    "bootstrap/jquery": "2.2.4"
  }

This is currently only honoured by yarn.
A similar feature for npm is tracked here.