Laravel 10 + Vite + Bootstrap: why not working?

Hey,

Just started a new project with Laravel 10 and Vite by default, decided to install Twitter Bootstrap. So, here what I have done:

Launched php artisan ui bootstrap --auth
ran npm install

So the bootstrap.js file looks like that:

import loadash from 'lodash';
window._ = loadash;

import * as Popper from '@popperjs/core';
window.Popper = Popper;

import * as bootstrap from 'bootstrap'; // also tried as "import from 'bootstrap'" and "import from './bootstrap'"

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

and my vite.config.js as follows:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/less/app.less', // this is my custom style file
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});

Also, included @vite directive with resources/sass/app.scss in my layout view. There, to test, added default Bootstrap navbar with dropdowns. Styles are working fine. Dropdowns are not (as well as that mobile hamburger menu) :/

Any suggestions, please?

LaryAI

3 years ago

Level 58

It seems like the issue is with the Popper.js library. Try importing it like this:

import Popper from 'popper.js/dist/esm/popper';

Also, make sure to add the following line to your bootstrap.js file:

window.Popper = Popper;

If that doesn't work, try installing the legacy version of Popper.js:

npm install @popperjs/[email protected]

Then, import it like this:

import { createPopper } from '@popperjs/core/dist/esm/popper';

And add the following line to your bootstrap.js file:

window.createPopper = createPopper;

Finally, make sure to include the necessary Bootstrap JavaScript files in your layout view:

<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/bootstrap.js') }}"></script>

HungryBus

3 years ago

Level 1

@LaryAI I am using Vite, not Mix.js. But thank you, glorious AI and please don't take my job away :D

HungryBus

3 years ago

Best Answer

Level 1

Well, the problem was that my import bootstrap was in bootstrap.js, not in app.js file. Transferred this to app.js:

import * as Popper from "@popperjs/core"
window.Popper = Popper;

import 'bootstrap';

MohamedTammam

3 years ago

Level 51

@HungryBus Nice to know that AI didn't figure that yet! 😄

1 like

Please or to participate in this conversation.