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.

CodePudding user response：

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

CodePudding user response：

composer create-project laravel/laravel react-js

composer require laravel/ui

php artisan ui react

//then run

npm install

//then

npm run watch

npm run production

npm install webpack webpack-cli webpack-dev-server --save-dev