Using MDBootstrap with Laravel?

For days I’ve been trying to use MDBootstrap with my Laravel project. I’m especially trying to create MDBootstrap Datatables. I’ve successfully installed MDB with npm and yarn but I’m getting a jquery error ReferenceError: $ at the $(document) in my web browser’s console when trying to access the index.blade.html page. This index page is being extended from the app.blade.html, which includes the scripts that Bootstrap’s webpage over MDB Data Tables requires. I downloaded MBD directly and tested out their datatables and the index.html worked flawlessly. I’m still very new to Laravel (and PHP) so any recommendations would be greatly appreciated.

app.blade.html

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <!-- MDB icon -->
    <link rel="icon" href="{{asset('node_modules/img/mdb-favicon.ico')}}" type="image/x-icon">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{{asset('node_modules/css/bootstrap.min.css')}}">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="{{asset('node_modules/css/mdb.min.css')}}">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="{{asset('node_modules/css/style.css')}}">
    <!-- MDBootstrap Datatables  -->
    <link href="{{asset('node_modules/css/addons/datatables2.min.css')}}" rel="stylesheet">
    <title>Laravel Project</title>

</head>
<body>
    <div class="container">
    @yield('content')
    </div>

    <!-- jQuery -->
    <script type="text/javascript" src="{{asset('node_modules/js/jquery.min.js')}}"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="{{asset('node_modules/js/popper.min.js')}}"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="{{asset('node_modules/js/bootstrap.min.js')}}"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="{{asset('node_modules/js/mdb.min.js')}}"></script>
    <!-- Your custom scripts (optional) -->
    <script type="text/javascript"></script>
    <!-- MDBootstrap Datatables  -->
    <script type="text/javascript" src="{{asset('node_modules/js/addons/datatables2.min.js')}}"></script>

    <script>
        // Material Design example
        $(document).ready(function () {
            $('#dtMaterialDesignExample').DataTable();
            $('#dtMaterialDesignExample_wrapper').find('label').each(function () {
                $(this).parent().append($(this).children());
            });
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
                const $this = $(this);
                $this.attr("placeholder", "Search");
                $this.removeClass('form-control-sm');
            });
            $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
            $('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
            $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
            $('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
        });
    </script>

</body>
</html>

JavaScript
​x
 
<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="{{asset('css/app.css')}}">    <!-- MDB icon -->    <link rel="icon" href="{{asset('node_modules/img/mdb-favicon.ico')}}" type="image/x-icon">    <!-- Font Awesome -->    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">    <!-- Google Fonts Roboto -->    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">    <!-- Bootstrap core CSS -->    <link rel="stylesheet" href="{{asset('node_modules/css/bootstrap.min.css')}}">    <!-- Material Design Bootstrap -->    <link rel="stylesheet" href="{{asset('node_modules/css/mdb.min.css')}}">    <!-- Your custom styles (optional) -->    <link rel="stylesheet" href="{{asset('node_modules/css/style.css')}}">    <!-- MDBootstrap Datatables  -->    <link href="{{asset('node_modules/css/addons/datatables2.min.css')}}" rel="stylesheet">    <title>Laravel Project</title>​</head><body>    <div class="container">    @yield('content')    </div>​    <!-- jQuery -->    <script type="text/javascript" src="{{asset('node_modules/js/jquery.min.js')}}"></script>    <!-- Bootstrap tooltips -->    <script type="text/javascript" src="{{asset('node_modules/js/popper.min.js')}}"></script>    <!-- Bootstrap core JavaScript -->    <script type="text/javascript" src="{{asset('node_modules/js/bootstrap.min.js')}}"></script>    <!-- MDB core JavaScript -->    <script type="text/javascript" src="{{asset('node_modules/js/mdb.min.js')}}"></script>    <!-- Your custom scripts (optional) -->    <script type="text/javascript"></script>    <!-- MDBootstrap Datatables  -->    <script type="text/javascript" src="{{asset('node_modules/js/addons/datatables2.min.js')}}"></script>​    <script>        // Material Design example        $(document).ready(function () {            $('#dtMaterialDesignExample').DataTable();            $('#dtMaterialDesignExample_wrapper').find('label').each(function () {                $(this).parent().append($(this).children());            });            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {                const $this = $(this);                $this.attr("placeholder", "Search");                $this.removeClass('form-control-sm');            });            $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');            $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');            $('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');            $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');            $('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();        });    </script>​</body></html>​​

index.blade.html

@extends('layouts.app')

@section('content')
    <h1>User Table</h1>

    @if(count($users) > 0)
        <table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th class="th-sm">ID
                </th>
                <th class="th-sm">Name
                </th>
                <th class="th-sm">Occupation
                </th>
                <th class="th-sm">Location
                </th>
                <th class="th-sm">Salary
                </th>
            </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{$user->id}}</td>
                    <td>{{$user->name}}</td>
                    <td>{{$user->occupation}}</td>
                    <td>{{$user->location}}</td>
                    <td>{{$user->salary}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    @endif
@endsection

JavaScript
 
@extends('layouts.app')​@section('content')    <h1>User Table</h1>​    @if(count($users) > 0)        <table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">            <thead>            <tr>                <th class="th-sm">ID                </th>                <th class="th-sm">Name                </th>                <th class="th-sm">Occupation                </th>                <th class="th-sm">Location                </th>                <th class="th-sm">Salary                </th>            </tr>            </thead>            <tbody>            @foreach($users as $user)                <tr>                    <td>{{$user->id}}</td>                    <td>{{$user->name}}</td>                    <td>{{$user->occupation}}</td>                    <td>{{$user->location}}</td>                    <td>{{$user->salary}}</td>                </tr>            @endforeach            </tbody>        </table>    @endif@endsection​​

UsersController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppUser;

class UsersController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        $users = User::orderBy('id', 'asc')->paginate(10);
        return view('users.index',['users'=>$users);
    }

JavaScript
 
<?php​namespace AppHttpControllers;​use IlluminateHttpRequest;use AppUser;​class UsersController extends Controller{    /**     * Display a listing of the resource.     *     * @return IlluminateHttpResponse     */    public function index()    {        $users = User::orderBy('id', 'asc')->paginate(10);        return view('users.index',['users'=>$users);    }​

Answer

As I have painfully discovered, using MDBootstrap with Laravel can be a little finicky at times, but I got my datatable functioning properly and with the correct styling after I was able to correctly reference the required js files (using Laravel Mix). With the styling, I neglected using app.sass as at the time I was unaware of its functionality. However, there were/are some times after including other scripts when mdb.min.js will still throw me the “TypeError: “exports” is read-only” error which I resolve by deleting the js files from the public folder and recompiling.

Advertisement

Answer