Laravel Mix - JavaScript not working

Hello, I'm trying to add a dropdown menu to my website. I installed laravel mix with bootstrap, jquery and popper.js then run npm run dev and imported it in the blade template:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
    </div>
</body>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>

</html>

And this is the content of resources/js/bootstrap.js:

window._ = require("lodash");

try {
    window.$ = window.jQuery = require("jquery");
    window.Popper = require("@popperjs/core");
    window.bootstrap = require("bootstrap");
} catch (e) {
    console.log(e);
}

The page loads without any console error and the network tab shows that everything, css and js, is loaded correctly. Clicking on the dropdown does absolutely nothing, but if I run $('.dropdown-toggle').dropdown('toggle') inside the console the dropdown works and is toggled.

MrLucio

3 years ago

Level 1

After looking at the template code generated when I added the auth functionality, it turned out that the problem was caused by a change in the attribute name of data-toggle in bootstrap 5.

Not working:

data-toggle="dropdown"

Working:

data-bs-toggle="dropdown"

jlrdw

3 years ago

Level 75

Did you run

npm install jquery

1 like

MrLucio

3 years ago

Level 1

@jlrdw Hi, yes I did.

Please read my previous answer, the problem was related bootstrap 5.

vincent15000

3 years ago

Level 63

I already had this problem.

First of all, does the dropdown work with Bootstrap integrated via CDN ?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Please or to participate in this conversation.