Datatable buttons not working on webpack

chens

I'm new with webpack and i'm trying to move my existing project to webpack enviroment, i managed to get everything to work beside the Datatable.
The Datatable object is working fine besides the export buttons.

I'm working with webpack version 1.14.0 and Datatable version 1.10.13.
I have installed modules: datatables, datatables.net, datatables.net-bs, datatables.net-buttons, datatables.net-dt.

I tryed the following steps from this issue:
https://datatables.net/forums/discussion/32542/datatables-and-webpack

1. I tryed to use the same js files that i'm using on my original project but that didnt work.

2. I have followed swinc solution as mentioned by this link:
   https://gist.github.com/swemaniac/2fbe5d6d5e425b7c046168b6d6e74e95
   I added the next loader to my loaders in the config file:
   {test: /datatables\.net.*/, loader: 'imports?define=>false'}

I have added the folowing lines on my main script:

import 'datatables.net';
import dt from 'datatables.net-bs';
dt(window, $);

That solution didnt work and output this error message even though i'm using jQuery:
Uncaught TypeError: Cannot set property '$' of undefined

3/
I have followed swinc solution as mentioned by this linke:
stackoverflow.com/questions/29302742/is-there-a-way-to-disable-amdplugin

I installed imports-loader and add to my loaders in the config file:
{ test: /myjsfile.js/, loader: 'imports?define=>false'}

That selution didnt work too.

Can someone know how to load Datatable with full export button plugin, or can tell me what i'm doing wrong.

chriscz

I was sitting with the same problem today (funny, I'm hating the JS ecosystem more every day). I followed similar posts to yours.

Ok so here's what I'm seeing as wrong:

1. The line { test: /myjsfile.js/, loader: 'imports?define=>false'} won't do anything unless your main app file is myjsfile.js, however you don't want to disable AMD loading on your main file, you instead want to do it for datatables, which you already did with test: /datatables\.net.*/, loader: 'imports?define=>false'}. So you may remove that line from your webpack config.
2. Replace

import 'datatables.net';
import dt from 'datatables.net-bs';
dt(window, $);

in your app with

var datatables = require("datatables.net");
var dtbootstrap = require("datatables.net-bs");
/* NOTE that $ needs to have the value of jquery */
dtbootstrap(window, $);

I'm not sure if this will fix the buttons for you. But we can take it from there.

UPDATE 27/12/2016 (12:00 UTC)

Here's a better example of what you may want to do in your app.

var $ = require('jquery');
var dt_extras = [ 
         require("datatables.net"),
         require("datatables.net-bs"),
         require("datatables.net-buttons"),
         require("datatables.net-responsive"),
         require("datatables.net-buttons-bs"),
         require("datatables.net-responsive-bs")
];

dt_extras.forEach(function(e) {e(window, $);});

hirntotfurimmer

This is awesome. I wish I would have found this sooner as it would have saved me a lot of time.

I like your example at the end. Very cool.

legreco

Using Laravel 5.4 with laravel mix,
in my bootstrap.js

try {
   // var $ = require('jquery');
  //window.$ = window.jQuery = require('jquery');
    global.$ = global.jQuery = require('jquery');

    var dt_extras = [
        require("datatables.net"),
        require("datatables.net-buttons"),
        require("datatables.net-responsive"),
        require("datatables.net-select")
    ];

    dt_extras.forEach(function(e) {e(window, $);});

} catch (e) {
    console.error(e);


}

Everything seems to be ok... but console log this error:

app.js:sourcemap:47450 TypeError: Cannot set property '$' of undefined
    at DataTable (app.js:sourcemap:15241)
    at app.js:sourcemap:47447
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (app.js:sourcemap:47446)
    at Object.<anonymous> (app.js:sourcemap:47503)
    at __webpack_require__ (app.js:sourcemap:20)
    at Object.c (app.js:sourcemap:46239)
    at __webpack_require__ (app.js:sourcemap:20)
    at Object.<anonymous> (app.js:sourcemap:119996)
    at __webpack_require__ (app.js:sourcemap:20)

Syc

Hi,
Has there been any fix to this?

Thank you!