$(...).DataTable is not a function when using Laravel Mix

Question

I struggle using Laravel Mix and DataTables. The issue I have is that when I compile down my .js-files etc., each time I would then visit a page that would execute a jQuery datatable, the follwoing error is thrown:

The error is:

jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
Uncaught TypeError: $(...).DataTable is not a function

From what I understand, $(...).DataTable is not a global variable, but how can I make sure that it is accessible "on a global scope" / within my app?

The following is my setup:

app.js

import jquery from 'jquery/dist/jquery.slim'
import 'bootstrap-sass'
import 'datatables.net';
import dt from 'datatables.net-bs';

window.$ = window.jQuery = jquery;

webpack.mix.js

mix
    .js('resources/assets/admin/js/app.js', 'js/')
    .extract([
        'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
    ])
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
        DataTable : 'datatables.net-bs'
    })

Any idea would be highly appreciated.

Answer 1

I just want to add to Artistan's answer (I can't comment). I was able to get the CSV, Copy, and PDF buttons to appear using his code, but not the Excel button, until I changed this line

require( 'jszip' );

to this

window.JSZip = require('jszip');

After that, both the generic 'excel' and the 'excelHtml5' buttons appeared.

Answer 2

For the latest Laravel Mix...

do not invoke the required datatable packages in webpack, leave off the (...)

this will load bootstrap, jquery, datatables, and many of the plugins for datatables without any issues...

window._ = require( 'lodash' );;
window.$ = window.jQuery = require( 'jquery' );;
window.Popper = require('popper.js').default;

// bootstrap
require('bootstrap');

// bootstrap datatables...
require( 'jszip' );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-autofill-bs4' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-fixedheader-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-select-bs4' );
// bs4 no js - require direct component
// styling only packages for bs4
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );
// pdfMake
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

no need for the other code in webpack.mix.js

.extract([
    'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
])
.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
    DataTable : 'datatables.net-bs'
})

Answer 3

EDIT: while this answer worked at the time that it was posted and accepted, looks like it's not the case anymore. For anyone looking for the updated solution, other answers are up to date

Yevgeniy Afanasyev

Alexander Gallego L.

Artistan

Because this is accepted answer, I will add the new the solution, but the credit for this should go to people who provided updated answers

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

require( 'datatables.net' );
require( 'datatables.net-bs' );

---

Original answer

Looking at npmjs pages for datatables.net and the datatables.net-bs

They should be initialized like this

var $ = require( 'jquery' );
require( 'datatables.net' )( window, $ );
require( 'datatables.net-bs' )( window, $ );

Which we could transform into this

var $     = require( 'jquery' );
var dt    = require( 'datatables.net' )
var dt_bs = require( 'datatables.net-bs' )

// in this call we're attaching Datatables as a jQuery plugin
// without this step $().DataTable is undefined
dt( window, $ )
// we need to do the same step for the datatables bootstrap plugin
dt_bs( window, $ )

But if you really want to use import .. from .., take a look into MDN import documentation

import $ from 'jquery/dist/jquery.slim';
import * as dt from 'datatables.net';
import * as dt_bs from 'datatables.net-bs';

dt( window, $ )
dt_bs( window, $ )

Answer 4

For all functions i load in bootstrap this:

try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');

require('bootstrap');

window.JSZip = require("jszip");
//require( "pdfmake" );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );

} catch (e) {}

I work with Laravel 5.7 and npm 6.4.1