Import order hiccup (Bootstrap + DataTables + jquery)
Import order hiccup (Bootstrap + DataTables + jquery)
BartDB
Posts: 3Questions: 1Answers: 0
I'm trying to get Datatables + Bootstrap + jquery to work nicely together in a Symfony 6 project.
This all works fine and nicely as long as I don't use the datatables buttons.
Once I include the buttons (or try to), then errors that could indicate a jquery mismatch (between the installed version and the version expected by datatables) arise.
However, I don't think this is the REAL cause since I have a project using the same versions where however the datatables buttons do work.
I've the following config (minimized to the maximal extend):
App.js:
import './styles/app.scss';
import jquery from 'jquery';
window.$ = window.jQuery = jquery;
import 'datatables.net';
import 'datatables.net-bs5';
import 'datatables.net-buttons';
import 'datatables.net-buttons-bs5';
import 'bootstrap';
$(document).ready(function() {
$('#myTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
});
});
relevant part of my package.json:
"dependencies": {
"bootstrap": "^5.3.0",
"bootstrap-icons": "^1.10.5",
"datatables.net": "^1.13.5",
"datatables.net-bs5": "^1.13.5",
"datatables.net-buttons-bs5": "^2.4.1",
"datatables.net-colreorder-bs5": "^1.7.0",
"datatables.net-keytable-bs5": "^2.10.0",
"datatables.net-responsive-bs5": "^2.5.0",
"datatables.net-rowgroup-bs5": "^1.4.0",
"datatables.net-searchpanes-bs5": "^2.2.0",
"datatables.net-select": "^1.7.0",
"datatables.net-select-bs5": "^1.7.0",
"dragula": "^3.7.3",
"flatpickr": "^4.6.13",
"font-awesome": "^4.7.0",
"jquery": "^3.7.0",
"jquery-contextmenu": "^3.0.0-beta.2",
"jquery-ui": "^1.13.2",
"jsv": "^1.0.0",
"jszip": "^3.10.1",
"moment": "^2.29.4",
"normalize.css": "^8.0.1",
"pdfmake": "^0.2.7",
"webpack": "^5.88.2"
},
I always get this error:
buttons.bootstrap5.mjs:13 Uncaught TypeError: Cannot read properties of undefined (reading 'defaults')
at ./node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.mjs (buttons.bootstrap5.mjs:13:25)
at __webpack_require__ (bootstrap:19:1)
at ./assets/app.js (app.js:17:84)
at __webpack_require__ (bootstrap:19:1)
at __webpack_exec__ (app.scss:1:1)
at app.scss:1:1
at __webpack_require__.O (chunk loaded:23:1)
at app.scss:1:1
at webpackJsonpCallback (jsonp chunk loading:34:1)
at app.js:2:77
The other files (webpack.conf etc) I can provide but I think the issue should lie somewhere in the code I provided.
npm run watch doesnt give any errors.
It's, I think, not related to this question:
https://datatables.net/forums/discussion/77675/typeerror-cannot-read-properties-of-undefined-reading-classname-in-symfony-stimulus-webpack
I tried to use the
https://debug.datatables.net/ - as expected (due to the fact its an import issue) this only works on the "working" scenario, so with the buttons not imported
(
// import 'datatables.net-buttons';
// import 'datatables.net-buttons-bs5';
) and this results in in this -> https://debug.datatables.net/uwoqaj
Please let me know if you have any ideas
- where the problem lies ?
- how I can troubleshoot this kind of issues in the (edge) browser ?
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
Try:
And double check what version of the
datatables.net-buttons/datatables.net-buttons-bs5packages you've got (2.4.2 is the current release).If that doesn't work, I think I'd need a repo which shows the error so I can look into it.
Thanks,
Allan
I dont have datatables.net-buttons but I upgraded "datatables.net-buttons-bs5" from 2.4.1 to 2.4.2.
And changed the import as suggested:
import './styles/app.scss';
// Import and configure jQuery and JSZip
import jquery from 'jquery';
window.$ = window.jQuery = jquery;
jQuery.noConflict();
import jszip from 'jszip';
window.JSZip = jszip;
import DataTable from 'datatables.net-bs5';
import 'datatables.net-buttons-bs5';
// Import Bootstrap JavaScript (make sure it's already installed via npm)
import 'bootstrap'
Unfortunately this does not do the job.
I'll look how to simulate in a repo, without the company branding....
The
datatables.net-buttonspackage is a dependency ofdatatables.net-buttons-bs5and should have been installed automatically. I'd have expected it to be in yournode_modulesdirectory.Allan
Don't know what it was, and I will never know it...
But it got solved by yarn-removing and re-installing all the necessary datatables packages.
Strange because I even had copied the entire package json and multiple complete rebuilds were done...
Anyway, solved and sorry this thread will likely help no-one further forward
Hurrah - good to hear you got it going.
Allan