Problem installing Datatables with NPM and Browserify

htwyford

I'm fairly new to using NPM, so this is probably some obvious NPM mistake!

I've installed DataTables and the extensions I require via NPM. My package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "browserify-css": "^0.10.1"
  },
  "dependencies": {
    "bootstrap-material-design": "^0.5.10",
    "datatables.net": "^1.10.15",
    "datatables.net-bs": "^1.10.15",
    "datatables.net-buttons": "^1.3.1",
    "datatables.net-buttons-bs": "^1.3.1",
    "datatables.net-keytable": "^2.2.1",
    "datatables.net-keytable-bs": "^2.2.1",
    "datatables.net-rowgroup": "^1.0.0",
    "datatables.net-rowgroup-bs": "^1.0.0",
    "jquery": "^3.2.1"
  }
}

I'm trying to bundle everything together with Browserify. My main.js, to be bundled into bundle.js:

var mdb = require('bootstrap-material-design');
var dt = require('datatables.net-bs')();
var buttons = require('datatables.net-buttons-bs')();
var buttons5 = require('datatables.net-buttons/js/buttons.html5.js')(); // HTML 5 file export
var buttonPrint = require('datatables.net-buttons/js/buttons.print.js')(); // Print view button
var keyTable = require('datatables.net-keytable')();
var rowGroup = require('datatables.net-rowgroup')();

I have jQuery on the page separately, before bundle.js. The Bootstrap Material Design JS is loading fine, so I know there's no issue with the way I've added bundle.js to the page.
Finally, I've added all the CSS files in a main.css, which I've included on the page before bundle.js:

@import url(../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css);
@import url(../node_modules/bootstrap-material-design/dist/css/ripples.css);
@import url(../node_modules/datatables.net-bs/css/dataTables.bootstrap.css);
@import url(../node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css);
@import url(../node_modules/datatables.net-keytable-bs/css/keyTable.bootstrap.css);
@import url(../node_modules/datatables.net-rowgroup-bs/css/rowGroup.bootstrap.css);
@import url(Site.css);
body {
}

Again, the Bootstrap MD stuff is loading fine, so there's no inherent issue with main.css itself.
According to the debug bookmarklet, dataTables is not present on my pages. I of course have the script on the page that initializes DataTables. I feel like it has something to do with the way I'm bundling CSS, but I'm not sure. Any help is appreciated!

allan

The CSS shouldn't really effect the JS at all. The debug bookmarklet only operates on the JS - it doesn't look at the CSS at all.

I don't immediately see any issues with the above - are there any errors or anything reported? Can you link to the page so I can take a look at the built files?

Allan