I've created a new laravel project laravel new project
And installed bootstrap ui like so:
php artisan ui bootstrap
Then compiled with :
npm install
npm run dev
But when I use bootstrap inside app.js like so :
require('./bootstrap');
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
The console shows the following error :
app.js?e348:5 Uncaught ReferenceError: bootstrap is not defined
at eval (app.js?e348:5:5)
at Array.map (<anonymous>)
at eval (app.js?e348:4:38)
at Object../resources/assets/js/app.js (app.js:973:1)
at __webpack_require__ (app.js:1060:42)
at app.js:1214:86
at Function.__webpack_require__.O (app.js:1097:23)
at app.js:1217:53
at app.js:1219:12
I've to mention that I run npm run dev after making changes in any resource file, and I know about npm run watch.
Ok, I solved the problem this way:
in resources/js/bootstrap.js file :
window._ = require('lodash');
try {
window.$ = require('jquery');
window.bootstrap = require('bootstrap');
} catch (e) {
console.error(e);
}
notice the line : window.bootstrap = require('bootstrap');