Import order hiccup (Bootstrap + DataTables + jquery)

BartDB

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

1. where the problem lies ?
2. 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.

allan

Try:

import DataTable from 'datatables.net-bs5';
import 'datatables.net-buttons-bs5';

And double check what version of the datatables.net-buttons / datatables.net-buttons-bs5 packages 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

BartDB

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....

allan

The datatables.net-buttons package is a dependency of datatables.net-buttons-bs5 and should have been installed automatically. I'd have expected it to be in your node_modules directory.

Allan

BartDB

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

allan

Hurrah - good to hear you got it going.

Allan