User dropdown menu not working

Make sure jQuery is the first jS script e.g if you're using JavaScript, jQuery first and then the bootstrap Ja afterwards at the bottom of the page

So one thing I did not realize was all the default scripts that were being loaded already through my js/app.js folder... I had to remove jquery and bootstrap from the top of my page as well as a few other scripts and it works fine now...

@jpeterson579 I did the same thing as you did and after commenting jquery and bootstrap js files the dropdown on my site started working.

Can anyone please tell me why is it happening and how should I deal with this issue other than the current solution of removing and commenting the jquery and bs files.

@chiragchaudhari97 Same thing here solved it (removing references to jquery and boostrap.js in my app.blade.php file)

If you read what exactly @jpeterson579 was saying, it's that basically jquery and bootstrap are already loaded in the app.js file (probably due to webpack compilation), so basically when you load it again - you're essentially over-riding / over-writing the existing scripts - and that's the core reason it's not working .

If, like me, your modals filled with jquery stopped working with just all.js, simply remove the refer attribute from <script src="{{ asset('js/app.js') }}" defer></script>, that is, leave it as <script src="{{ asset('js/app.js') }}"></script>at the top of your scripts

First check your css and js file location is perfect. then you change data-bs-toggle="dropdown" to ​data-toggle="dropdown". I hope it will help you.

If you import the alpine script in the app.blade.php, then remove it.