Using DataTables.net with Webpack

Recently I found a need for installing DataTables.net in my Angular 2 application, which is packaged using Webpack. Unfortunately, I faced many errors while trying to install the library using NPM and importing DataTables.net into my vendor.ts file.

As it turned out, DataTables.net can be used with AMD and CommonJS importers, but Webpack allows loading of either one. AMD is the default loader in DataTables.net, so it was being loaded using the AMD method, when I was trying to load with CommonJS. The solution is to use the imports-loader plugin for Webpack to disable the AMD loading support for DataTables.net.

Add this to your webpack.config.js:

module: {
    loaders: [
        ...
        {
            test: /datatables\.net.*/,
            loader: 'imports?define=>false'
        }
        ...
}

On the imports-loader github page, it says:

There are many modules that check for a define function before using CommonJS. Since webpack is capable of both, they default to AMD in this case, which can be a problem if the implementation is quirky.

Then you can easily disable the AMD path by writing

imports-loader?define=>false

Finally, to import the packages into your vendor.ts:

require("datatables.net")(window, $);
require("datatables.net-bs")(window, $);
require("datatables.net-responsive")(window, $);
require("datatables.net-responsive-bs")(window, $);
require("datatables.net-select")(window, $);
require("!style!css!datatables.net-bs/css/dataTables.bootstrap.css");
require("!style!css!datatables.net-responsive-bs/css/responsive.bootstrap.css");
require("!style!css!datatables.net-select-bs/css/select.bootstrap.css");

Now DataTables.net loads up perfectly.