How do I add popper.js to a Laravel 8 with Bootstrap 5 project?

Question

I am making a blogging application with Laravel 8 and Bootstrap 5. I use a form placed within a Bootstrap modal to add a post. In addition, I include a single JavaScript file in the project.

<script src="{{ asset('js/app.js') }}"></script>

In resources/js , I have an app.js and a bootstrap.js file. In app.js, I require bootstrap.js with

require('./bootstrap')

From webpack.mix.js I compile all that into the single JavaScript file public\js\app.js :

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

I want to add popper.js to the project, like this:

require('./popper');
require('./bootstrap');

But, for this purpose, I need the popper.js in resources/js along with the other two files. So, I did npm i @popperjs/core and npm run dev . But it does not compile, and I don't get popper.js in the above-metioned js directory. So, how can I fix this issue?

Answer 1

1 - Install @popperjs/core using this command: npm i @popperjs/core

2 - Add this line to your bootstrap.js file:

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

3 - Run this command: npm run dev

4 - Now you have access to window.Popper in your blade files.

Answer 2

In your resources/js/bootstrap.js file, you can use Popper.js and Bootstrap with jQuery like the following.

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('@popperjs/core');
    window.bootstrap = require('bootstrap');
} catch (exception) {
    console.error(exception);
}