Can't include jQuery Datatables via webpack bower components

Question

require('datatables'); does not work

I'm having a hard time trying to include jQuery-Datatables as a webpack module from bower, the current settings work with other bower components, here part of the webpack config file:

module.exports = {
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        )
    ],
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components']
    }
};

Answer 1

The problem is that the DirectoryDescriptionFilePlugin expects a single string entry in the main field, and the bower.json of datatables declares an array:

"main": [
        "media/js/jquery.dataTables.js",
        "media/css/jquery.dataTables.css"
]

There is a whole discussion, about why it's like that here.

(shameless plug)

I have created a bower-webpack-plugin, that you may want to look at. It is still under a development, but should handle arrays in main field. Additionally if you find any issues with it, please feel free to report a bug, and I'll try to get it fixed.