Laravel-datatables: Uncaught ReferenceError: jQuery is not defined when using with Laravel Mix

[teddywest32]

Summary of problem or feature request

Uncaught ReferenceError: jQuery is not defined

I am using Laravel mix and have compiled all the jQuery libraries to suit the bundle. Now i am trying to use this library and have got the jQuery not defined issue.

Code snippet of problem

My html to render

@section('content')
    {!! $html->table() !!}
@endsection

@section('scripts')
    {!! $html->scripts() !!}
@endsection

I do have a configuration on webpack to convert jQuery to suit all the compiled bundles.

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            })
        ]
    };
});

The issue is when i am trying to use the external jQuery codes as all the "$" and "jQuery" have been replaced in the library as "jquery".

So, how do i use it with the configuration?

System details

• Operating System Windows | Ubuntu
• PHP Version 7.0+
• Laravel Version 5.5
• Laravel-Datatables Version ~8.0
• Datatables Version ^1.10.16

[yajra]

This is on js and out of scope of the project. Anyways, this must on the arrangement of your assets. Make jQuery is loaded before doing any dataTables stuffs. Thanks!

[teddywest32]

@yajra Thanks for the reply but i have found a solution for the issue.

I have done importing the jQuery as:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;

and i have to do is override the script.blade.php and replace the jQuery with $

(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["%1$s"]=$("#%1$s").DataTable(%2$s);})
(window,$); //<== was jQuery and replaced with $

[kdion4891]

In case anyone runs into the same issue.

Publish the view files for datatables-html:

php artisan vendor:publish --tag=datatables-html

Change the contents of views/vendor/datatables/script.blade.php to this:

window.addEventListener('DOMContentLoaded', function() {
    (function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["%1$s"]=$("#%1$s").DataTable(%2$s);})(window,jQuery);
});