Webpack : $.fn.dataTable.Editor is not a constructor

avattant

I'm trying to get the Editor demo file working with webpack, but I get this warning :

[WDS] Warnings while compiling.
4webpack-dev-server.js:1 ./src/STS/PortailBundle/Resources/public/Editor-1.7.3/js/dataTables.editor.js
10:6641-6746 Critical dependency: the request of a dependency is an expression

And this error :

new.js:38 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

I have an alias in webpack pointing to the editor file :
'datatables.net-editor': path.join(__dirname, '../src/STS/PortailBundle/Resources/public/Editor-1.7.3/js/dataTables.editor')

And here is my js file :

require('datatables.net');
require('datatables.net-editor');

var editor;

$(document).ready(function() {

    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Position:",
            name: "position"
        }, {
            label: "Office:",
            name: "office"
        }, {
            label: "Extension:",
            name: "extn"
        }, {
            label: "Start date:",
            name: "start_date",
            type: "datetime"
        }, {
            label: "Salary:",
            name: "salary"
        }
        ]
    } );

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.first_name+' '+data.last_name;
                } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );

});

I saw somewhere that the error could appear when jQuery is loaded twice, but I don't think this is the case for me. JQuery is loaded once in webpack.config.js, to be availbale everywhere in the application.

Is someone has any idea about the meaning of these errors and how to solve them ? Thanks a lot !

allan

Hi,

Could you send me a copy of your webpack config file please? I don't immediately know what is causing that error.

Thanks,
Allan