1

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?

Giovan Cruz
  • 681
  • 9
  • 21
  • have you tried this for your mask error https://stackoverflow.com/questions/28512909/why-does-jquery-mask-say-its-not-a-function – Hemant Jan 04 '21 at 18:39
  • Recheck your imports, jQuery first, then Popper.js, then Bootstrap JS, call the tooltip function after the document is ready – Avishka Dambawinna Jan 10 '21 at 06:49
  • @HemantMalik thanks, but it does not solve, because it isn't a mask error. It only occurs when I changed the bootstrap loader from node_modules instead of inclusion of minified version directly – Giovan Cruz Jan 14 '21 at 12:29
  • @AvishkaDambawinna I have already done. I even attached the order to the question. In part, this resolved. Thanks! – Giovan Cruz Jan 14 '21 at 12:37

2 Answers2

1

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'),
          ...
Giovan Cruz
  • 681
  • 9
  • 21
0

I think this can help.

  // TOOLTIP PLUGIN DEFINITION
  // =========================

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.tooltip')
      var options = typeof option == 'object' && option
      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
      if (typeof option == 'string') data[option]()
    })
Samlinuxgeek
  • 13
  • 2
  • Thanks @Samlinuxgeek, it does not solve, because $.fn.tooltip is undefined. I have already figure out what is going on, is a webpack config. – Giovan Cruz Jan 14 '21 at 12:33