Trouble upgrading 2.0.8 -> 2.1.8 with buttons

craigh

After upgrade I now have an error something to do with buttons:

TypeError: undefined is not an object (evaluating 'datatables_net_bs5__WEBPACK_IMPORTED_MODULE_1__["default"].Buttons.defaults')

package.json:

    "datatables.net": "^2.1.8",
    "datatables.net-bs5": "^2.1.8",
    "datatables.net-buttons": "^3.2.0",
    "datatables.net-buttons-bs5": "^3.2.0",
    "datatables.net-fixedcolumns": "^5.0.4",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",
    "datatables.net-rowreorder": "^1.5.0",
    "datatables.net-rowreorder-bs5": "^1.5.0",

I use webpack, so I import like so:

import '../../styles/datatables.css';

import 'datatables.net-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-buttons/js/buttons.html5';

when instantiating the datatable, I use

            layout: {
                topEnd: ['search', 'buttons'],
            },

It seems that the datatable is not defined. I don't know enough to even ask the questions right Do you have any ideas? This worked before upgrading.

allan

import 'datatables.net-bs5';

should probably be:

import DataTable from  'datatables.net-bs5';

so you have a DataTable object to use. However, it looks fine apart from that.

Are you able to make a minimal Git repo or StackBltiz showing the issue with your webpack config so I can take a look?

Allan

craigh

Hi @allan thank you for your response.

I tried that and it didn't change anything

I cannot create anything to share because it is super complex and proprietary. I am also using omines/datatables-bundle to do all this which only makes it more complicated. But as I said, it was working before the upgrade.

Omines uses this to instantiate. They use the jQuery version - which is why I think I didn't need to import DataTable... as you suggested.

var dt = $('table', root).DataTable(dtOpts);

Did anything change wrt buttons in that upgrade that I should have noticed?

allan

Here is an example that is using Vite as the packager rather than Webpack, and also Vue for the display.

As you'll be able to see the ES imports work as expected.

There must be something about the Webpack configuration you are using that is tripping things up. Perhaps you can create a simple example based on your Webpack config?

Did anything change wrt buttons in that upgrade that I should have noticed?

Not as far as I know

I wonder if it is possible that multiple different DataTables versions are being loaded in your package manager. Or possibly multiple jQuery's. Without being able to see the issue, it is very difficult to debug I'm afraid.

Allan

craigh

Hi @allan - I wanted to let you know that the fix for this was to remove several packages in package.json. Now I only require the following:

    "datatables.net-bs5": "^2.1.8",
    "datatables.net-buttons-bs5": "^3.2.0",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",

This seems to work and may support your theory that multiple different DataTables versions were being loaded.

I did not find this solution myself, but my colleague Tyson found it.

Thanks again for your help!

allan

Super - thanks for posting back. Good to hear you've got it working now thanks to Tyson's genius (Christmas bonus time ).

Allan