Vuejs jquery loading error when build

LittleLama

Debugger code (debug.datatables.net): DataTables debugger: jQuery not loaded on this page, therefore no DataTables :-(
Error messages shown: Uncaught TypeError: Cannot set properties of undefined (setting '$')
Description of problem:
I manage to run DataTables on VueJS3. I'm using the official component datatables.net-vue3.
On local machine, everything looks good. But after build on the server, page won't load. In console an error says the message above.

Server is in a docker running Node.js.
Result can be seen at https://beta.mpgstats.fr

Used DT packages :
"datatables.net": "^1.13.6",
"datatables.net-bs5": "^1.13.6",
"datatables.net-vue3": "^2.1.3",

It comes from jquery.datatables.js

var Kr = Jh, Cn = function(p, M) {
if (Cn.factory(p, M))
return Cn;
if (this instanceof Cn)
return Kr(p).DataTable(M);
M = p,
this.$ = function(R, I) {
return this.api(!0).$(R, I)
}

I don't know how to deal with this problem, any help would be appreciated.

LittleLama

Related :
* https://datatables.net/forums/discussion/77190
* https://datatables.net/forums/discussion/74598
* https://datatables.net/forums/discussion/73955
* https://datatables.net/forums/discussion/73785
* https://datatables.net/forums/discussion/comment/214576

It might come from a DT plugin and API v2 changes. Commenting all plugins fixed the issue. I'm now investigating on finding how to reset them.

LittleLama

Okay, it was API v2 changes related.
This config seems to work, except fixed headers/footers that dont make anything but this need to be more studied.
If Allan passes there, many thanks for all your great work and more over for helping us everyday.

Issue is CLOSED

//DataTables
import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net-bs5';
DataTable.use(DataTablesLib);

//Language
import FRlang from "@/components/datatables/language_FR.json"

//Search builder plugin
import 'datatables.net-datetime';
import 'datatables.net-searchbuilder-bs5'

//Buttons export plugin
import JSZip from "jszip";
window.JSZip = JSZip;
import 'datatables.net-buttons-bs5';
import bhtml5 from 'datatables.net-buttons/js/buttons.html5.js'
import colvis from 'datatables.net-buttons/js/buttons.colVis.js'

//Fixed headers plugin
import 'datatables.net-fixedcolumns-bs5'
import 'datatables.net-fixedheader-bs5'

//Sorting plugin => should be migrated to new ES module of datatables.net-plugins/sorting
import "@/components/datatables/sorting";
const skipEmptyValues = DataTablesLib.absoluteOrderNumber([
{ value: '', position: 'bottom' }
]);
const skipZeroValues = DataTablesLib.absoluteOrderNumber([
{ value: 0, position: 'bottom' }
]);
const skipEmptyAndZeroValues = DataTablesLib.absoluteOrderNumber([
{ value: 0, position: 'bottom' },
{ value: "", position: 'bottom' },
{ value: null, position: 'bottom' },
{ value: undefined, position: 'bottom' }
]);

allan

Hi,

Many thanks for the update - glad to hear you got it sorted. And thanks for your kind words

Allan