Download CDN bundle with buttons - error "Cannot read properties of undefined (reading 'defaults')"

blacksteel1288

Error messages shown:

Uncaught TypeError: Cannot read properties of undefined (reading 'defaults')
    at cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/cr-1.5.5/date-1.1.2/r-2.2.9/sb-1.3.2/sp-2.0.0/sl-1.3.4/datatables.min.js:227:362
    at cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/cr-1.5.5/date-1.1.2/r-2.2.9/sb-1.3.2/sp-2.0.0/sl-1.3.4/datatables.min.js:227:107
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at enable (require.min.js:1:13242)
    at e.init (require.min.js:1:9605)
    at a (require.min.js:1:8305)
    at Object.completeLoad (require.min.js:1:15962)
    at HTMLScriptElement.onScriptLoad (require.min.js:1:16882)
---
Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (companies:203:49)
    at e (jquery-3.6.0.min.js:2:30038)
    at t (jquery-3.6.0.min.js:2:30340)

Description of problem:
Hi,

I'm using the Downloader to bundle all my DataTables plug-ins. It works fine, except when I add Buttons to the package. If Buttons is included in the bundle, then I get the error above, even if I am not using any 'buttons' in the table configuration.

I'm wondering if anyone else has run into this? I suspect it has something to do with require.js and dependencies, but not sure why it works in the original case, but not with the buttons packages.

Here's the examples:

Using this bundle works fine, no errors (without buttons):
https://cdn.datatables.net/v/bs4/dt-1.11.5/cr-1.5.5/date-1.1.2/r-2.2.9/sb-1.3.2/sp-2.0.0/sl-1.3.4/datatables.min.js

Using this bundle fails with the error (with buttons):
https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/cr-1.5.5/date-1.1.2/r-2.2.9/sb-1.3.2/sp-2.0.0/sl-1.3.4/datatables.min.js

I am using require.js to load packages. Here's the relevant configs (abbreviated) -- note I am only swapping the CDN link below under 'paths' and updating the css link to use the new bundle also, no other changes:

require.config({
shim: {
'bootstrap': ['jquery'],
'datatables': ['jquery'],
},
map: {
    '*': {
        'datatables.net': 'datatables',
        'datatables.net-bs4': 'datatables',
        'datatables.net-responsive': 'datatables',
    }
},
paths: {
'jquery': 'https://code.jquery.com/jquery-3.6.0.min',
'bootstrap': 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min',
'datatables': 'https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/cr-1.5.5/date-1.1.2/r-2.2.9/sb-1.3.2/sp-2.0.0/sl-1.3.4/datatables.min',
'moment': 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min',
}
});

and then on the page, the table is called this way:

<script>
require(['datatables', 'jquery', 'moment'], function(datatable, $, moment) {
  $(document).ready(function () {
    $("#mytable").DataTable({
...
});
</script>

Any help appreciated!

kthorngren

I'm not familiar with the package manager you are using but wonder if you need to add buttons to the map, like this:

map: {
    '*': {
        'datatables.net': 'datatables',
        'datatables.net-bs4': 'datatables',
        'datatables.net-responsive': 'datatables',
        'datatables.net-buttons': 'datatables',
    }
},

Kevin

blacksteel1288

I tried that, but it has no effect. Same error message.

allan

It is certainly something to do with the package manager as including that URL directly works no problem.

Are you able to create an example for us which shows the issue?

Thanks,
Allan