Skip to content
Advertisement

Bootstrap tooltip is not a function, Popper not working

I’m trying to use separate modules of bootstrap in my website instead of include the whole minified file. But I’m freaking out, why is that so complicated? Or I’m complicating this?

"devDependencies": {
  "exports-loader": "1.1.1",
  "webpack": "4.39.2",
  "uglify-js": "3.6.0",
},
"dependencies": {
  "bootstrap": "4.3.1",
  "jquery": "3.4.1",
  "popper.js": "1.14.7",
 }

custom bootstrap.js in /js

/* Tries:
import $ from 'jquery';
import 'popper.js';
import 'popper.js/dist/umd/popper.js';
import 'popper.js/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js'; */

window.jQuery = $;
window.$ = $;
global.$ = $;


/* BOOTSTRAP CUSTOM IMPORTS */
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/tab';

With that, my code compile with success but on chrome console this error appear

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

If I include this on my webpack.config.js:

new webpack.ProvidePlugin({
  $: 'jquery/src/jquery',
  jQuery: 'jquery/src/jquery',
  'window.jQuery': 'jquery/src/jquery',
  Popper: ['popper.js', 'default'],
}),

The tooltip error is gone, but starts to do error on other libs, like:

//Error on chrome console
Uncaught TypeError: $(...).mask is not a function

My Loading order of JS is:

LIBS (A WEBPACK MERGED FILE WITH ALL OTHER LIBS, LIKE JQUERY, MASKS, SLICK...)
BOOTSTRAP
POLYFILL

Searching the internet I see that a lot of people are experiencing this problem but the solutions they present are not working for me.

Please, anybody can help me?

Advertisement

Answer

Thanks for responses.

I figured out what is going on, not really understanding why but, bootstrap imports with JQuery were causing conflicts in the use of jquery by plugins, so, I had to remove jquery imported from bootstrap file then include manually on another process of plugins file, like that:

/* BOOTSTRAP.js CUSTOM IMPORTS */
//removed jquery imports
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
...

webpack.config:

    //I had to maintain that provider
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default'],
    }),
    new MergeIntoSingleFilePlugin({
      files: {
        "js/libs.base.js": [
          //included jquery min file on merge of plugins
          path.join(source, 'src/libs/jquery', 'jquery-3.4.1.min.js'),
          path.join(source, 'src/libs/jquery-mask', 'jquery.mask.min.js'),
          ...
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement