datatables with webpack $.fn.dataTable undefined

datatables with webpack $.fn.dataTable undefined

spigandromedaspigandromeda Posts: 4Questions: 2Answers: 0


I am trying to migrate my project to Symfony 4. To do so I want to use webpack/encore instead of static assets. I am unsing the datatables plugin and now I am trying to make it work. After requiring the module I cannot use $.fn.dataTables.

TypeError: $.fn.dataTable is undefined

The module is imported via require('');
I also tried to use AMD: require('')(window, $); this resulted in TypeError: this is undefined (jquery.dataTables.js:132).

Writing the require output to $.fn.dataTable also doesn't work.
dataTable = require(''); $.fn.dataTable = dataTable;

Of course it's no longer undefined but it also doensn't work because the module exports DataTable and not $.fn.dataTable. So the resulting error when unsing it is TypeError: $(...).DataTable is not a function

I would appreciate your help to finally make this work like I would use static assets.


  • colincolin Posts: 4,964Questions: 0Answers: 861

    Hi @spigandromeda ,

    Take a look at this thread here - hopefully that will get you going.



  • spigandromedaspigandromeda Posts: 4Questions: 2Answers: 0

    Nope. I am afraight that didn't work.
    I am not sure how datatables and webpack internally work. But I guess the package attaches itself to the jquery space (why we can use $.fn.dataTable).
    So when calling the package via require ... does webpack handle $ to the module so it can attach itself to jquery or isn't that even designated?

  • spigandromedaspigandromeda Posts: 4Questions: 2Answers: 0

    Ok I found a solution. Its not pretty but it works:

    var DataTable = require('');
    require( '' );
    require( '' );
    $.fn.dataTable = DataTable;
    $.fn.dataTableSettings = DataTable.settings;
    $.fn.dataTableExt = DataTable.ext;
    DataTable.$ = $;
    $.fn.DataTable = function ( opts ) {
        return $(this).dataTable( opts ).api();

    Simple: just adding all functions to $.fn manually. I just took the code lines from the actual code in the nodeJS module.

    If somebody knows the proper solution to add such prototypes from inside the module: please let us know :smile:

  • allanallan Posts: 49,585Questions: 1Answers: 7,309 Site admin

    That shouldn't be required... If you are AMD loading, which it appears you are, then DataTables does this:

            define( ['jquery'], function ( $ ) {
                return factory( $, window, document );
            } );

    So as long as jquery is resolvable (it is case sensitive) then it should work.

    Can you confirm both if you are use AMD and if jquery is resolvable in your loader?


  • dmezieredmeziere Posts: 5Questions: 0Answers: 0

    Thank you a thousand times spigandromeda ! You have provided the only solution that works for me ! I think I tried any other way I could find on the web for several days now.

  • dmezieredmeziere Posts: 5Questions: 0Answers: 0

    Well, partially. If I try to use, after it, again, "DataTable is undefined".

  • allanallan Posts: 49,585Questions: 1Answers: 7,309 Site admin

    I don't think there is a package. Perhaps you means


  • dmezieredmeziere Posts: 5Questions: 0Answers: 0

    Well, I don't really know. I am a PHP dev, and I hate JS and it's weird behaviour. I am really forced to use it and loose patience very rapidly with it. But I love DataTables, and use it for years now. That thing, Webpack Encore, is a curse for us PHP developpers.

    What I understood, is that Webpack Encore uses yarn in place of npm, so maybe the packages names are different. I also found that on a blank Symfony 4 project, DataTables works fine. But on my project, the only way I found to make it work is by redefining the $.fn.dataTable thing. and if i try to use plugins with it, they craches.

    It is so frustrating to copy-paste obscur things found on the web and not understand why it would work or why it wouldn't. Having globals, not-so-globals, and maybe-globals variables ... For me JS is not a programming anguage. It isn't even build by the ones that specifies it. Each browsers make their own JS engine, respecting or not the specs ... It couldn't and shouldn't work.

  • dmezieredmeziere Posts: 5Questions: 0Answers: 0
    edited October 2018

    It seems that I made it work. But I don't really know how, as I modified so much things in a week.

    I've replaced all "require()" calls with "import" ones, and defined window.jQuery, and now it seems to work.

    import $ from 'jquery';
    window.jQuery = $;
    import DataTable from '';
    import '';

    No more need to redeclare $.fn.dataTable. Like we say in french "C'est tombé en marche". It works, but I can't explain why.

    Edit: It looks like "window.jQuery = $;" isn't event required, thanks to Encore's autoProvidejQuery()

  • dmezieredmeziere Posts: 5Questions: 0Answers: 0

    Ignore my previous message, it's all false :/ Can you even delete it, Allan ?

  • andrewredlineandrewredline Posts: 9Questions: 3Answers: 0

    I just about gave up on using datatables via webpack until I came across the following:

    Works 100% now using the imports-loader.

    A couple of notes:

    Installing from is fine. is not required.

    Change loader: 'imports?define=>false' to loader: 'imports-loader?define=>false'

  • colincolin Posts: 4,964Questions: 0Answers: 861

    Excellent, glad all working, and thanks for the suggestions, I'm sure that'll help others,


  • sunixsunix Posts: 4Questions: 0Answers: 0

    You can also just disable amd loader:

    var config = Encore.getWebpackConfig();
      parser: {
        amd: false,
    module.exports = config;
Sign In or Register to comment.