Bootstrap bootstrap.bundle.js does not work for Button Dropdown on Laravel Project

Question

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?

Answer 1

I don't know if this is the ultimate solution, but this worked.

I ran npm install boostrap@next which points to version 5.0.0.0-beta2 and npm run dev and it worked.

Turns out that I don't need to specify window.Popper = require('@popperjs/core/dist/umd/popper').default; after all and just require('bootstrap/dist/js/bootstrap.bundle.js'); did the job.