Adminlte: Uncaught TypeError: Cannot read property 'defaults' of undefined at HTMLDocument.<anonymous>

Created on 18 Dec 2019 · 3Comments · Source: ColorlibHQ/AdminLTE

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

I am trying to use AdminLTE theme for my project.
I designed the layout as shown below:

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="csrf-token" content={{csrf_token()}}>

    <title>HRIS</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/fontawesome-free/css/all.min.css') }}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{{ asset('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css') }}">
    <!-- Tempusdominus Bbootstrap 4 -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

    <!-- JQVMap -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/jqvmap/jqvmap.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/dist/css/adminlte.min.css') }}">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
    <!-- Date picker -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/datetimepicker/bootstrap-datetimepicker.min.css') }}">
    <!-- summernote -->
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/summernote/summernote-bs4.css') }}">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="{{ asset('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700') }}">

    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/datatables/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/datatables/select.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/datatables/buttons.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/plugins/dropzone/dropzone.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/adminlte3/dist/css/custom.css') }}">
</head>

   <!--  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> -->

   <!--  <link href="{{ asset('css/adminltev3.css') }}" rel="stylesheet" /> -->
   <!--  <link href="{{ asset('css/custom.css') }}" rel="stylesheet" /> -->

<body class="hold-transition sidebar-mini">

    @guest @yield('content') @else
    <div class="wrapper" id="app">
        <!-- Header -->
    @include('layouts.header')
        <!-- Sidebar -->
    @include('layouts.appraisal-sidebar') 



    @yield('content')
        <!-- Footer -->
    @include('layouts.footer')
    </div>
    <!-- ./wrapper -->
    @endguest <!-- @yield('javascript') -->

    <!-- jQuery -->
    <script src="{{ asset('theme/adminlte3/plugins/jquery/jquery.min.js') }}"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="{{ asset('theme/adminlte3/plugins/jquery-ui/jquery-ui.min.js') }}"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
      $.widget.bridge('uibutton', $.ui.button)
    </script>

    <!-- Bootstrap 4 -->
    <script src="{{ asset('theme/adminlte3/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- ChartJS -->
    <script src="{{ asset('theme/adminlte3/plugins/chart.js/Chart.min.js') }}"></script>
    <!-- Sparkline -->
    <script src="{{ asset('theme/adminlte3/plugins/sparklines/sparkline.js') }}"></script>
    <!-- JQVMap -->
    <script src="{{ asset('theme/adminlte3/plugins/jqvmap/jquery.vmap.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/jqvmap/maps/jquery.vmap.usa.js') }}"></script>
    <!-- jQuery Knob Chart -->
    <script src="{{ asset('theme/adminlte3/plugins/jquery-knob/jquery.knob.min.js') }}"></script>
    <!-- daterangepicker -->
    <script src="{{ asset('theme/adminlte3/plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ asset('theme/adminlte3/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <!-- Summernote -->
    <script src="{{ asset('theme/adminlte3/plugins/summernote/summernote-bs4.min.js') }}"></script>
    <!-- overlayScrollbars -->
    <script src="{{ asset('theme/adminlte3/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>


    <script src="{{ asset('theme/adminlte3/plugins/popper/umd/popper.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/datatables/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/dist/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/dist/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/dist/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/dist/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/dist/js/ckeditor.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/datetimepicker/bootstrap-datetimepicker.min.js') }}"></script>
    <script src="{{ asset('theme/adminlte3/plugins/dropzone/dropzone.min.js') }}"></script>

    <!-- AdminLTE App -->
    <script src="{{ asset('theme/adminlte3/dist/js/adminlte.js') }}"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--     <script src="{{ asset('theme/adminlte3/dist/js/pages/dashboard.js') }}"></script> -->
    <!-- AdminLTE for demo purposes -->
<!--    <script src="{{ asset('theme/adminlte3/dist/js/demo.js') }}"></script>-->
    <script src="{{ asset('theme/adminlte3/dist/js/main.js') }}"></script>

    <script src="{{ asset('theme/adminlte3/plugins/chart.js/Chart.min.js') }}"></script>


    @yield('scripts')


</body>
</html>

When I tried to run the application, I got the error shown below:

Screenshots
adminlte_jquery_error

Environment (please complete the following information):

AdminLTE Version: [e.g. v3.0.0]
Operating System: [Windows]
Browser (Version): [e.g. Chrome (Latest)]

I know it has to do with the JQuery, how do I resolve it.

bug 3.x

Source

noblemfd

Most helpful comment

It look like you created custom javascript, and I would guess you placed it before jquery or jQuery is not loaded correctly.

REJack on 18 Dec 2019

👍2

All 3 comments

It look like you created custom javascript, and I would guess you placed it before jquery or jQuery is not loaded correctly.

REJack on 18 Dec 2019

👍2

@REJack - I don't have any custom javascript placed before JQuery. Why is the JQuery not loading correctly and how do I make it load correctly?

noblemfd on 18 Dec 2019

Its hard to say with out the rendered code from your app, the layout itself looks ok only I would not load all the plugins every time this cause higher loading times.

REJack on 18 Dec 2019

Was this page helpful?

0 / 5 - 0 ratings