This is a mom question, but none of solutions has worked so far. I'm using Laravel 10 with Vite, installed Bootstrap with NPM and the configuration was ok to use bootstrap css and bootstrap icons, but I can't load boostrap js, which is necessary to make it work modals, toasts, pop-ups, etc.

vite.config.js:

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, "node_modules/bootstrap"),
            '~bootstrap-icons': path.resolve(__dirname, "node_modules/bootstrap-icons/font")
        }
    }
});

resources/js/app.js

import * as bootstrap from 'bootstrap';

Importing files in the main blade.php layout (where all other pages extend):

...
@vite(['resources/css/app.css', 'resources/js/app.js'])
...

And the blade.php page where the error occurs (bootstrap is not defined)

...
<script>
    window.onload = () => {
        const toastLiveExample = document.querySelector("#liveToast")
        const toast = new bootstrap.Toast(toastLiveExample)
        toast.show()
    }
</script>
...

This is a mom question, but none of solutions has worked so far. I'm using Laravel 10 with Vite, installed Bootstrap with NPM and the configuration was ok to use bootstrap css and bootstrap icons, but I can't load boostrap js, which is necessary to make it work modals, toasts, pop-ups, etc.

vite.config.js:

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, "node_modules/bootstrap"),
            '~bootstrap-icons': path.resolve(__dirname, "node_modules/bootstrap-icons/font")
        }
    }
});

resources/js/app.js

import * as bootstrap from 'bootstrap';

Importing files in the main blade.php layout (where all other pages extend):

...
@vite(['resources/css/app.css', 'resources/js/app.js'])
...

And the blade.php page where the error occurs (bootstrap is not defined)

...
<script>
    window.onload = () => {
        const toastLiveExample = document.querySelector("#liveToast")
        const toast = new bootstrap.Toast(toastLiveExample)
        toast.show()
    }
</script>
...

• javascript
• laravel
• npm
• bootstrap-5
• vite

Share Improve this question Follow asked Dec 1, 2023 at 2:07 user22453190user22453190 2

• 1 Can you specify exact error message from terminal or from browser console? – Tpojka Commented Dec 1, 2023 at 16:07
• @Tpojka Uncaught ReferenceError: bootstrap is not defined – user22453190 Commented Dec 2, 2023 at 0:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

In app.js file. You can define window.bootstrap = bootstrap so that you can use it in your blade.

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;