In a fresh Laravel project, I've included Bootstrap 5 'npm install bootstrap' and imported in /resrouces/sass/app.scss @import "~bootstrap/scss/bootstrap"; - great, it works.
Now I have a dropdown component that is not working, and I can't figure out why.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="user_select" data-bs-toggle="dropdown" aria-expanded="false">
Select...
</button>
<ul class="dropdown-menu" aria-labelledby="user_select">
<li><a class="dropdown-item" href="user/1">user 1</a></li>
<li><a class="dropdown-item" href="user/2">user 2</a></li>
</ul>
</div>
Very simple button...
When I click on the button, nothing happens. There's no console error or anything.
Bootstrap Official doc states Plugins can be included individually (using Bootstrap’s individual js/dist/*.js), or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both).
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';
require('Bootstrap');
npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
@ ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121
Tried adding Popper.
window.Popper = require('@popperjs/core/dist/umd/popper').default;
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';
require('Bootstrap');
npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
@ ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121
If I do it like this, it compiles successfully, but dropdowns do not work still. I've made sure to clear caches, and even tried it in incognito windows every time.
window.Popper = require('@popperjs/core/dist/umd/popper').default;
require('bootstrap/dist/js/bootstrap.bundle.js');
What am I missing?
