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?
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);
}
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.