Can’t load popper.js with Laravel Mix

I recently upgraded to bootstrap 5 and my tooltips/popovers in my application stopped working. I have the following error in console:

My understanding is that my Laravel Mix / webpack is failing to include popper.js in its compilation? I don’t understand why it is looking for popper.js.map, shouldn’t everything be compiled into a single file (app.js)?

In my webpack.mix.js I have:

const mix = require('laravel-mix');

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

In resources/bootstrap.js I have:

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

and finally in resources/app.js I have:

window.bootstrap = require('./bootstrap');

require('./components/Job');
require('./components/Toast');
require('./components/Proteomes/ProteomeManager');

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new window.bootstrap.Tooltip(tooltipTriggerEl)
})

I have already installed and saved bootstrap and popper via npm. Thanks!

Answer

in bootstrap.js

window._ = require('lodash');
import Popper from 'popper.js/dist/umd/popper.js'; 

try {
    window.Popper = Popper; 
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

in webpack.mix.js

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