无法使用 Laravel Mix 加载 popper.js

Question

我最近升级到 bootstrap 5，我的应用程序中的工具提示/弹出框停止工作。我在控制台出现以下错误：

我的理解是我的 Laravel Mix / webpack 未能在其编译中包含 popper.js？我不明白它为什么要查找 popper.js.map，不应该将所有内容都编译成一个文件（app.js）吗？

在我的webpack.mix.js 我有：

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

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

在resources/bootstrap.js 我有：

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';

最后在resources/app.js我有：

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)
})

我已经通过 npm 安装并保存了 bootstrap 和 popper。谢谢！

Answer 1

在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) {}

在webpack.mix.js

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