I have successfully integrated Bootstrap v5.1.0 into my Laravel 8 project using npm. Now, I am facing an issue with including bootstrap.bundle.js in my public/app.js.
After installing popperjs, I added the following code to my resources/js/bootstrap.js:
try {
window.Popper = require('@popperjs/core');
require('bootstrap');
} catch (e) {
}
This is my webpack.mix.js code:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css')
.sourceMaps();
In my template, I have included CSS & JS like this:
{{-- Styles --}}
<link rel="stylesheet" href="{{asset('css/app.css')}}">
{{-- Script --}}
<script src="{{asset('js/app.js')}}"></script>
Despite the fact that public/js.app.js (generated from mix) contains a lot of code (refer to the picture link below), the Bootstrap JS functions (such as Popovers) are not working properly.
https://i.sstatic.net/ClOaj.jpg
What is the correct way to include Bootstrap JS files in my Laravel project?