Wednesday 6 January 2021

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?



from Bootstrap tooltip is not a function, Popper not working

No comments:

Post a Comment