TypeError: Cannot read properties of undefined (reading 'className') in Symfony + Stimulus + Webpack

matfire

Hello all, I'm trying to add datatables with its bootstrap5 styles; for reusability, I decided to create a stimulus controller that initializes the datatable. This is its code:

import { Controller } from "@hotwired/stimulus";
import '../styles/datatables.css'
import '../styles/buttons.bootstrap5.css'
import jszip from 'jszip';
import pdfmake from 'pdfmake';
import $ from 'jquery'
import DataTable from 'datatables.net-dt'
import 'datatables.net-bs5'
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons-bs5'
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-fixedcolumns-dt';
import 'datatables.net-fixedheader-dt';


/* stimulusFetch: 'lazy' */
export default class extends Controller {
    static targets = ["table"]
    static values = {
        buttons: Array
    }

    connect() {
        new DataTable(this.tableTarget, {
            buttons: ["colvis", ...this.buttonsValue],
            language: {
                emptyTable:"Pas de données pour cette table",
                info: "Affiche les éléments _START_ à _END_ sur _TOTAL_",
                infoEmpty: "Affiche 0 éléments sur 0",
                search: "Chercher:",
                zeroRecords: "Aucun résultat corréspond à cette recherche",
                lengthMenu: "Afficher _MENU_ éléments",
                paginate: {
                    first:"Début",
                    last:"Fin",
                    next:"Suivant",
                    previous:"Précédant"
                }
            }
        })
    }
}

Everything was working when using the default styles and buttons. When I began to transition to bs5, I began to get all errors relating to buttons (including the one presented in the title). Has anyone ever had to use this kind of setup?

allan

The best way for us to offer help with built errors, is if you create a small git repo (or Stackblitz works as well) which recreates the issue, so I can try to built it and see what is going wrong.

Allan

matfire

Sorry about that, here you go: https://github.com/matfire/dt-example/
once you get it all setup, you can look at the problem at this url: http://localhost:8000/resources/box

allan

I spotted this error when running npm run watch to build webpack:

"./assets/controllers/datatable_controller.js" contains a reference to the file "datatables.net-buttons-bs5".
This file can not be found, please check it for typos or update it if the file got moved.

And right enough the datatables.net-buttons-bs5 package is not in the package.json file. So I ran:

npm install datatables.net-buttons-bs5

Then rebuilt and the page renders without errors.

Allan

matfire

Thanks! I don't know why I forgot to install it...
But the problem is still there (I also tried building the final script files, but to no avail):
the error is:
buttons.bootstrap5.mjs:69 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'className')

Could it be an error in the import order?

import jszip from 'jszip';
import pdfmake from 'pdfmake';
import $ from 'jquery'
import DataTable from 'datatables.net-dt'
import 'datatables.net-bs5'
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons-bs5'
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-fixedcolumns-dt';
import 'datatables.net-fixedheader-dt';

Do I need the base dt package if I'm using bs5?

allan

No - use either the -bs5 or the -dt packages. Otherwise you'll get styling conflicts.

import jszip from 'jszip';
import pdfmake from 'pdfmake';
import $ from 'jquery'
import DataTable from 'datatables.net-bs5'
import 'datatables.net-buttons-bs5'
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-fixedheader-bs5';

Try and and let me know how you get on with it. It's weird that I didn't get an error yesterday, but if you are still having issues, perhaps you could update the package with the above changes and I'll try again.

Allan

matfire

Thanks, that did it!
I just uninstalled the other packages and it worked!
added a bit of t.buttons().container().appendTo(".dataTables_wrapper .col-md-6:eq(0)") and the buttons even show on the table.

Thank you!

allan

Awesome . Thanks for letting me know!

That horrible line to insert the buttons won't be needed with DataTables 2, which is on the horizon .

Allan