datatables editor select2 - Uncaught Error: Error adding field - unknown field type select2

[matteocostantini]

Summary of problem

I've a Laravel 9 installation, in dev console show Uncaught Error: Error adding field - unknown field type select2. Before working but after asset build with mix not! Can you provide a guideline to check my integration ? Select2 before work perfectly, in my laravel project not commits changing anything!!!

• Operating System win11 pro dev
• PHP Version 8.1
• Laravel Version 9
• Laravel-DataTables Version 9

[yajra]

Did you require the editor select2 script?

require('./fields/editor.select2');

[matteocostantini]

yess, of course, after require('select2');

[matteocostantini]

I'm using Editor-2.2.2.zip

[matteocostantini]

Can you give a guidelines for laravel 9 to use select2? what install ? how to compile app/bootstrap js? In another case where select2 is not present, DT with editor working perfectly!

[matteocostantini]

at new A (dataTables.editor.mjs:5708:19)
at A.W [as add] (dataTables.editor.mjs:1767:23)
at A.W [as add] (dataTables.editor.mjs:1750:18)
at new A (dataTables.editor.mjs:6659:18)
at HTMLDocument.<anonymous> (hostings:291:87)
at c (jquery.js:3583:29)
at l (jquery.js:3651:12)

[yajra]

I made some changes in the select2 field to the one provided on the DataTables Editor site but I think we are not allowed to share it publicly.

Shoot me an email and will send you the file I am using. I just required it and no special setup needed on my side.

[matteocostantini]

I think i’m not compiling very well js code.. i want build all DT components and dt editor licensed plugins. What is the best complete js code for laravel 9 Mix way? Require sequence? Jquery pattern ? The build assets stop to see select2 type in browser. Npm best version? Vite is better? In this moment the upgrade task is very hard.

[yajra]

This is my js on one of my projects. Still using Laravel Mix as it's hard to migrate everything to Vite.

bootstrap.js

window._ = require('lodash');
window.moment = require('moment');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
} catch (e) {}

import * as Bootstrap from 'bootstrap'

window.Bootstrap = Bootstrap;

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

app.js

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

import Swal from 'sweetalert2';
window.Swal = Swal.mixin({
    customClass: {
        confirmButton: 'btn btn-block btn-primary',
        cancelButton: 'btn btn-block btn-secondary',
    }
});

window.SweetAlert = window.Swal.mixin({
    allowOutsideClick: false,
    allowEscapeKey: false
});

require('pc-bootstrap4-datetimepicker');

// DataTables
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-buttons/js/buttons.colVis.js');
require('datatables.net-select-bs4');
require('datatables.net-fixedcolumns-bs4');
require('datatables.net-responsive-bs4');
require('datatables.net-searchpanes-bs4');
// require('datatables.net-editor-bs4');
require('./renderer/editor.bootstrap4');
require('./renderer/risk');
require('laravel-datatables-assets');
require('./plugins/buttons.reload');
require('./plugins/dataTables.default');

// DTE Fields
require('datatables.net-datetime');
require('./fields/editor.textField');
require('./fields/editor.select2');
require('./fields/editor.jsTree');
require('./fields/editor.display');
require('./fields/editor.daterangepicker');
require('./fields/editor.colorpicker');
require('./fields/editor.jsonViewer');
// require('./fields/editor.ckeditor4');
// require('./fields/editor.ckeditor5');
require('./fields/editor.quill');

// Plugins
require('./plugins/expired-session');
require('./plugins/plugins');
require('./plugins/dataTables.tooltip');
require('./plugins/dataTables.editor-remove-width');
require('./plugins/dataTables.editor-enabled-buttons');

require('./plugins/App.DataTable');

[matteocostantini]

./renderer/editor.bootstrap4 in your app.js , what content?

[yajra]

It's just the BS4 integration of Editor. I made some customization where I can define the form/modal width via runtime.

Something like:

Editor::make()->formOptions(['width' => 'xl'])...

[matteocostantini]

i'be write you a email

[yajra]

Encountered a similar issue today and was fixed by using "select2": "^4.1.0-rc.0",

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.