Cannot read property 'defaults' of undefined

shuba_ivan

I installed trial version for editor but faced with problem with implementation
this is directory wth files which was extracted from zip 'editor'
Then I sue webpack with symfony framework and in my 'assets/js/app.js' I did

// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.scss';
import * as dt_bs4 from 'datatables.net-bs4'

import * as fh_bs from 'datatables.net-fixedheader-bs4';
import * as r_bs from 'datatables.net-responsive-bs4';

// import * as editor from 'datatables.net-editor-bs4';
import * as editor4 from '../../editor/js/editor.bootstrap4';

import * as buttons from 'datatables.net-buttons-bs4';
import * as select from 'datatables.net-select-bs4';




require('@fortawesome/fontawesome-free/css/all.min.css');
require('datatables.net-dt/css/jquery.dataTables.min.css');
require('datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css');
require('datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css');
require('datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css');
require('datatables.net-select-bs4/css/select.bootstrap4.min.css');

// require('datatables.net-editor-bs4/css/editor.bootstrap4.min.css');
require('../../editor/css/editor.bootstrap4.min.css');

require('@fortawesome/fontawesome-free/js/all.js');

const $  = require( 'jquery' );
global.$ = global.jQuery = $;

then im my js file

document.addEventListener("DOMContentLoaded", function () {
    console.log( "hover!" );

    var editor; // use a global for the submit and return data rendering in the examples

    const app_rest_hovermenumanagment_edithovermenu = window.Routing
        .generate('app_rest_hovermenumanagment_edithovermenu');
    const app_rest_hovermenumanagment_listhovermenu = window.Routing
        .generate('app_rest_hovermenumanagment_listhovermenu');


    editor = new $.fn.dataTable.Editor( {
        ajax: app_rest_hovermenumanagment_edithovermenu,
        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: app_rest_hovermenumanagment_listhovermenu,
        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 }
        ]
    } );
});

and in console I facd with that

editor.bootstrap4.js:42 Uncaught TypeError: Cannot read property 'defaults' of undefined
    at editor.bootstrap4.js:42
    at Object.<anonymous> (editor.bootstrap4.js:9)
    at editor.bootstrap4.js:8
    at Object../editor/js/editor.bootstrap4.js (editor.bootstrap4.js:5)
    at __webpack_require__ (bootstrap:79)
    at Module.<anonymous> (app.js:24)
    at Module../assets/js/app.js (app.js:75)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
(anonymous) @ editor.bootstrap4.js:42
(anonymous) @ editor.bootstrap4.js:9
(anonymous) @ editor.bootstrap4.js:8
./editor/js/editor.bootstrap4.js @ editor.bootstrap4.js:5
__webpack_require__ @ bootstrap:79
(anonymous) @ app.js:24
./assets/js/app.js @ app.js:75
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ app.js:1
categories:96 Uncaught ReferenceError: $ is not defined
    at getJSonObject (categories:96)
    at categories:99
getJSonObject @ categories:96
(anonymous) @ categories:99
hover_menu.js:2 hover!
hover_menu.js:12 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
    at HTMLDocument.<anonymous> (hover_menu.js:12)

how to correct use edit opportunity ?

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

allan

It looks like you might need to add:

import * as editor4 from '../../editor/js/dataTables.editor';

although the Bootstrap 4 file should really include that automatically. You might also want to read over this blog post about using Editor with npm.

Allan