JS (jQuery) function won't trigger - Laravel 8 with Bootstrap 5 and jQuery-CodePudding

I am having trouble getting bootstrap and jQuery to play nice with Laravel 8. I tried building the app from scrats multiple times, following various tutorials, and making sure to follow the steps diligently. However, no dice. My buttons are unclickable, and I suspect the function that should be triggered on click doesn't even run at all.

The app was set up with the following commands:

laravel new name-of-app
composer require laravel/ui
php artisan ui bootstrap --auth
npm install bootstrap@latest @popperjs/core jquery jquery-ui --save-dev
npm run dev

webpack.mix.js:

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

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/theme.js', 'public/js')
    .js('resources/js/custom.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .css('resources/css/theme.css', 'public/css')
    .css('resources/css/custom.css', 'public/css')
    .sourceMaps();

app.js:

window.$ = window.jQuery = require('jquery');

import 'jquery-ui/ui/widgets/datepicker.js';
import 'jquery-ui/ui/widgets/tooltip.js';

require('./bootstrap');
require('@popperjs/core');

bootstrap.js:

window._ = require('lodash');

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

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

theme.js:

(function ($) {
    "use strict";

    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();

    var path = window.location.href; 
    $("#layoutSidenav_nav .sidenav a.nav-link").each(function () {
        if (this.href === path) {
            $(this).addClass("active");
        }
    });

    // Toggle the side navigation
    $("#sidebarToggle").on("click", function (e) {
        console.log('clicked');
        e.preventDefault();
        $("body").toggleClass("sidenav-toggled");
    });

    // Click to collapse responsive sidebar
    $("#layoutSidenav_content").click(function () {
        console.log('clicked2');
        const BOOTSTRAP_LG_WIDTH = 992;
        if (window.innerWidth >= 992) {
            return;
        }
        if ($("body").hasClass("sidenav-toggled")) {
            $("body").toggleClass("sidenav-toggled");
        }
    });

})(jQuery);

Now, in app.js, if I remove

import 'jquery-ui/ui/widgets/datepicker.js';

import 'jquery-ui/ui/widgets/tooltip.js';

in the web browser's console, I'll see the error that the datepicker()/tooltip() is not defined (for file theme.js), so I know the file gets loaded. But clicking on the button with id sidebarToggle, nothing happens. Not event the console.log gets run, and I am at a complete loss as to what could be wrong.

also, my HTML head, if it helps:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="webapp for purposes">
    <meta name="author" content="T5k">
    {{-- CSRF Token --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">

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

    <link rel="icon" type="image/png" href="{{ asset('icon.ico') }}">

    {{-- Scripts --}}
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/theme.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/custom.js') }}"></script>


    {{-- Styles & Fonts --}}
    <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ mix('css/theme.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ mix('css/custom.css') }}">
</head>

Thank you for your time. I hope I am missing something obvious and this is an easy fix. I am using the sb-admin-2 theme which relies on bootstrap. jQuery is needed because it makes my life much much much easier... except right now, right now it's making it miserable :)

CodePudding user response：

You don't share your whole HTML so I'm just guessing here but there's a chance your theme.js is trying to append a click event listener before the HTML document has been fully loaded, hence there is no #sidebarToggle element at the time the script is executed.

Try move your <script> tags in at the bottom of the <body> element or wrap your functions in $(document).ready(function () {});