$(...).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.

score 4 · Accepted Answer · answered Dec 05 '19 at 09:17

4

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');

answered Dec 05 '19 at 09:17

Mike Doe

16,349
11
65
88

That is so strange i was using `require('bootstrap');` from the start and only tried absolute paths for debugging. Thanks this now works. And cheers for the jquery alias trick. – joshmoto Dec 05 '19 at 09:34
Every npm package has so called “main script” so you usually just import by its name. – Mike Doe Dec 05 '19 at 10:06
1

global.jQuery did the trick, after countless attempts. I don't understand why this is required since webpack has .autoProvidejQuery()... but nevertheless, thank you. – Mecanik Jul 07 '21 at 08:52

Marko Bonaci · Answer 2 · 2021-07-22T18:07:55.600

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.

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

2 Answers2