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'), ...