I am trying to use datatables JQuery plugin with webpack and typescript. I already have JQuery up and running together with typings (intelliSense works), for datatables I have the intelliSense only, but after webpack build when I run the app the code fails when it comes to $('#id').dataTable() line.
app.js:43Uncaught TypeError: $(...).dataTable is not a function
I am not able to figure out how to attach this pluggin correctly, can anyone please help me?
The webpack.config.js is as follows; https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245
I hope this line will solve the problem;
{ test: require.resolve("dataTables.net"), loader: "imports?define=>false,$=jquery"}, as the doc of import loader 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.
datatables provides both, so I wanted to disable AMD using define=>false as mentioned here https://www.datatables.net/forums/discussion/32542/datatables-and-webpack
Now I'm stuck :(
2 Answers
Answers 1
Make sure you have jQuery datatables installed and that you tell webpack to load it.
See this answer.
Answers 2
You are almost there!
Make sure both datatables.net and datatables.net-dt installed via NPM:
npm install datatables.net datatables.net-dt --save-dev in your entry file ./src/main.js write:
require( 'datatables.net' )( window, $ ) require( 'datatables.net-dtt' )( window, $ ) after that, any code logic of following format $(...).dataTable will work as the examples shown o DataTables' homepage.
0 comments:
Post a Comment