DataTable Editor with Select2 and Vite

geonovation

Link to test case:

import $ from "jquery";
import DataTable from "datatables.net-bs5";
import Editor from "datatables.net-editor";
import "datatables.net-editor-bs5";
import select2 from 'select2';
select2($);
(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables.net', 'datatables.net-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
    'use strict';

    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }

    var _fieldTypes = DataTable.Editor ?
        DataTable.Editor.fieldTypes :
        DataTable.ext.editorFields;

    //// The rest of the select2 DataTables plugin
}));

export function initDataTableEditor() {
    const editor = new Editor({
        ajax: "../php/staff.php",
        table: "#myTable",
        fields: [
            {
                type: "select2",
                label: "List:",
                name: "list"
            }
        ]
    })
    new DataTable('#myTable', {
        ajax: "../php/staff.php",
        columns: [
            {data: "list"},
        ],
        select: true,
        buttons: [
            {extend: "create", editor: editor},
            {extend: "edit", editor: editor},
            {extend: "remove", editor: editor}
        ]}
    )
}

initDataTableEditor()

Debugger code (debug.datatables.net):

Error messages shown:
Uncaught Error: Error adding field - unknown field type select2
Description of problem:

Hello,

I really love the ES6 integration and everything works fine.
I use Vite to run the application. When I do npm start the project runs and DataTable with the Select2 integration works as expecting!

But when I build my application with npm run-script build I get an error:

Uncaught Error: Error adding field - unknown field type select2

Am I do I doing something wrong or is there maybe a plugin library.
I saw there is one for the DataTables https://www.npmjs.com/package/datatables.net-plugins but I can't find plug-ins for the DataTable Editor.

Thaks in advanced!

geonovation

I already have a fix for this problem. I created a new file:

select2plugin.js

import $ from "jquery";
import DataTable from "datatables.net-bs5";

if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}

var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;

_fieldTypes.select2 = {
    _addOptions: function ( conf, opts ) {
        var elOpts = conf._input[0].options;

        elOpts.length = 0;

        if ( opts ) {
            DataTable.Editor.pairs( opts, conf.optionsPair, function ( val, label, i ) {
                elOpts[i] = new Option( label, val );
            } );
        }
    },

     //// The rest of the select2 DataTables plugin
}

and imported this:

import $ from "jquery";
import DataTable from "datatables.net-bs5";
import Editor from "datatables.net-editor";
import "datatables.net-editor-bs5";
import select2 from 'select2';
select2($);
import '@/select2plugin';

Now when I build the code with Vite it works!