Can't get this to work with NPM and Webpack

Jakobud

I get this error:

jquery.dataTables.js:112 Uncaught TypeError: Cannot set property '$' of undefined
at DataTable (jquery.dataTables.js:112)
at eval (data.js:2)
at Object../js/data.js (data.bundle.js:164)
at webpack_require (data.bundle.js:79)
at checkDeferredModules (data.bundle.js:46)
at data.bundle.js:152
at data.bundle.js:155

Here's my code:

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

I've also tried

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

And my package.json dependencies:

"dependencies": {
"datatables.net": "^1.10.19",
"jquery": "^3.3.1"
}

No clue what I'm doing wrong here. I am loading the CSS directly into the page. I'm not loading the CSS via webpack.

colin

Hi @Jakobud ,

This thread here may help - the suggestion was to leave off the () so as not to invoke.

Hope that does the trick for you,

Cheers,

Colin

Jakobud

Well that worked. Why the hell does all the documentation give completely wrong instructions on how to use this? How would the developer of this thing actually expect people to pay for commercial licenses for it with such poor documentation. The documentation is thorough, yes. But with show-stopper documentation issues like this the rest of the documentation is useless.

allan

It depends on if you are using AMD or CommonJS as a loader. With AMD it is correct to not execute the import as it just uses a global window and jQuery. With CommonJS however you are more likely to be loading in your own modules, so you can pass in the window and jQuery instance.

In your Webpack configuration it sounds like you are using AMD.

This is the UMD DataTables uses if you are interested.

Its a very good point that this isn't clear in the documentation and I will work on that. Thanks for the feedback.

Allan

Jakobud

Pretty sure my Webpack is just using normal CommonJS modules. It's practically a default Webpack config.