Vuejs jquery loading error when build
Vuejs jquery loading error when build
LittleLama
Posts: 9Questions: 3Answers: 0
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.
Replies
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.
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
//DataTablesimport DataTable from 'datatables.net-vue3'import DataTablesLib from 'datatables.net-bs5';DataTable.use(DataTablesLib);//Languageimport FRlang from "@/components/datatables/language_FR.json"//Search builder pluginimport 'datatables.net-datetime';import 'datatables.net-searchbuilder-bs5'//Buttons export pluginimport 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 pluginimport 'datatables.net-fixedcolumns-bs5'import 'datatables.net-fixedheader-bs5'//Sorting plugin => should be migrated to new ES module of datatables.net-plugins/sortingimport "@/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' }]);Hi,
Many thanks for the update - glad to hear you got it sorted. And thanks for your kind words
Allan