[英]Can't load popper.js with Laravel Mix
I recently upgraded to bootstrap 5 and my tooltips/popovers in my application stopped working.我最近升级到 bootstrap 5,我的应用程序中的工具提示/弹出框停止工作。 I have the following error in console:
我在控制台中有以下错误:
My understanding is that my Laravel Mix / webpack is failing to include popper.js in its compilation?我的理解是我的 Laravel Mix / webpack 未能在其编译中包含 popper.js? I don't understand why it is looking for popper.js.map, shouldn't everything be compiled into a single file (
app.js
)?我不明白它为什么要寻找 popper.js.map,不应该将所有内容都编译成一个文件(
app.js
)吗?
In my webpack.mix.js
I have:在我的
webpack.mix.js
我有:
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:在
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';
and finally in resources/app.js
I have:最后在
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)
})
I have already installed and saved bootstrap and popper via npm.我已经通过 npm 安装并保存了 bootstrap 和 popper。 Thanks!
谢谢!
bootstrap.js
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
webpack.mix.js
mix.js('resources/js/app.js', 'public/js').sourceMaps();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.