[FIXED] How to build Bootstrap 4 with jQuery slim and new @popperjs with Laravel-mix?

Issue

The content of webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/assets/js/vendor.js', 'public/js');

The content of vendor.js:

window.Popper = require('@popperjs/core').default;

try {
    window.$ = window.jQuery = require('jquery/dist/jquery.slim.js');

    require('bootstrap');
} catch (e) {}

After the build, in the public/js/vendor.js file I can clearly see that @popperjs and jquery.slim.js gets included on top of jquery and old popperjs (they get duplicated).

I know that this happens because node_modules\bootstrap\dist\js\bootstrap.js has require('jquery'), require('popper.js') as dependencies.

How can I build the assets with new @popperjs and jquery.slim.js without the old popperjs and full jquery version?

Solution

It could help you out: https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript

So you can import plugins individually and use a newer popperjs version. But count on, it might be instable for bootstrap 4 to use a newer popperjs version.

Btw: https://github.com/twbs/bootstrap/issues/29842 chance in bootstrap 5.

Answered By - bornemisza

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)