Uncaught ReferenceError: bootstrap is not defined but still loaded

Question

In my Laravel 8 project I am trying to display a Toast via the following code:

app blade layout:

    <div class="toast" id="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="" class="rounded me-2" alt="...">
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</body>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@if(Session::has('message'))
<script type="text/javascript">
    var type = "{{ Session::get('alert-type', 'info') }}";
    var toast = document.getElementById('toast')
    console.log(type)
    switch (type) {
        case 'info':
            break;

        case 'warning':
            break;

        case 'success':
            break;

        case 'error':
            var toast = new bootstrap.Toast(toast)
            toast.show();
            break;
    }
</script>
@endif

I use webpack via laravel-mix v6.0.43.

app.js:

import "bootstrap";

webpack.mix.js:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

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

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.5",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.43",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.50.0",
        "sass-loader": "^12.6.0"
    }
}

npm run dev

> dev
> npm run development


> development
> mix


● Mix █████████████████████████ emitting (95%)  
 emit


✔ Mix
  Compiled successfully in 4.55s
                         
   Laravel Mix v6.0.43   
                         

✔ Compiled Successfully in 4516ms
┌────────────────────────────────────────────────────────────────────┬─────────┐
│                                                               File │ Size    │
├────────────────────────────────────────────────────────────────────┼─────────┤
│                                                         /js/app.js │ 299 KiB │
│                                                        css/app.css │ 201 KiB │
└────────────────────────────────────────────────────────────────────┴─────────┘
webpack compiled successfully

Dropdown and Modal via the data-bs-toggle="modal" attribute works perfectly and the app.js file contains all Bootstrap plugins..

I get the error message Uncaught ReferenceError: bootstrap is not defined even though Bootstrap is loaded.

Answer 1

Try to run this command again

npm run dev 

i hope it was useful