Laravel Ui bootstrap, bootstrap is not defined

Question

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.

Hooman Limouee · Accepted Answer · 2023-02-17 14:55:20Z

2

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: Pay attention to the line window.bootstrap = require('bootstrap');

edited Feb 17, 2023 at 14:55

answered Apr 23, 2022 at 13:23

Hooman Limouee

1,4633 gold badges24 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Ui bootstrap, bootstrap is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest