Cant setup Editor

tstream

import 'datatables.net'; import Editor from 'datatables.net-editor'; let dataTableEditor = new Editor(editorOptions);

i get
Message: Cannot set property '$' of undefined at DataTable (jquery.dataTables.js:132) at new ./node_modules/datatables.net-editor/js/dataTables.editor.js.module.exports (dataTables.editor.js:21)

i jave installed the editor "Editor-NodeJS-1.9.0"

tangerine

The message suggests that jQuery is not being referenced. DataTables is dependent on jQuery.

tstream

i was able to setup/use just Datatables just fine, its when i try to add in the editor (trial version) i get the error

import 'datatables.net'; $table.DataTable(dataTableOptions);
Works
But
import 'datatables.net'; import Editor from 'datatables.net-editor'; let dataTableEditor = new Editor(editorOptions); $table.DataTable(dataTableOptions);
Doesnt Work

tstream

and my understanding of the error message is that the object that suppose to have the '$' field is null/undefined. in this case its 'this' under Datatable that seems to be undefined when Editor calls it

allan

Are you able to give me a link to your repo so I can attempt to reproduce this error please? If that isn't possible, can you give me the steps and code you used?

Thanks,
Allan

tstream

using node i installed the jquery, datatables.net-dt, datatables.net-editor, and datatables.net-editor-dt packages. Followed the instructions in the readme in the datatables.net-editor package to install the trial (node node_modules/datatables.net-editor/install.js pathToEditorZip).
then my .js is:

import 'datatables.net-dt'
import Editor from 'datatables.net-editor'

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
//works without editor, shows datatable correctly
    editor = new Editor( {
        ajax: function(){alert("SUBMIT")},
        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"
            }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    } );
 
    var table = $('#example').DataTable( {
        dom: "Bfrtip",
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        }
    } );
} );

jquery is being added with webpack

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
      jQuery: 'jquery',
      $: 'jquery',
    }),
]

tstream

import * as DTEditor from 'datatables.net-editor';
let Editor = DTEditor(window,$);

allan

Can you show me your package.json file and the full Webpack config so I can attempt to recreate the issue here please?

Thanks,
Allan