DataTableBs5 import error

adrianorodrigues

Hi, I'm having the error "node_modules/datatables.net-bs5/types/dataTables.bootstrap5.d.ts' it's not a module" when trying to import DataTableBs5.

allan

There does indeed look to be an error there - the file is empty in our distribution repo for some reason. I'll look into that. I'm not entirely sure what the workaround for that is at the moment I'm afraid. Possibly to delete the types entry in the package.json file for that package.

Allan

adrianorodrigues

The compilation error disappears when deleting the types folder from the project, but a new error appears in the console:

app.js:2034 Uncaught TypeError: Cannot set properties of undefined (setting '$')
at DataTable (jquery.dataTables.js?13b2:109:1)
at Comp.use (datatables.net-vue.esm.js?33ab:26522:1)
at eval (datatable.ts?a52c:5:1)
at ./src/core/plugins/datatable.ts (app.js:364:1)
at webpack_require (app.js:2031:33)
at fn (app.js:2319:21)
at eval (main.ts:11:81)
at ./src/main.ts (app.js:452:1)
at webpack_require (app.js:2031:33)
at app.js:3244:109

allan

Are you able to set up a test case for this for me please - perhaps a simple git repo on github? I'm going to have to dig into this.

Thanks,
Allan

adrianorodrigues

Hi Allan, here is the git repo:

https://github.com/adrianoleiterodrigues/datatable-test

Thanks!

arkain

Anyone figure out what the issue is? Looks like datatables.bootstrap5.d.ts is an empty file and vite-tsc doesn't like it so fails on build. Is deleting the file the only workaround?

allan

I'm going to be committing a fix for this later today and hopefully releasing it later on in the week.

Allan

allan

Just a quick note to say that this hasn't been forgotten. I've committed the fixes required and will be doing a release soon.

Allan

yajra

Commenting to get notified on this thread? Looking forward to the next release.

Reasons:

• Laravel DataTables - Quick Starter guide failing on v1.13.1
• Vite integration issue

Works well on v1.12.1

Thanks!

allan

Hi!

I've just sent a PR with a couple of changes which will address this issue. You'd need to update the dependency to be DataTables 1.13 or newer as well (as this new method won't work with 1.12).

This error comes about because Vite will default to ES modules if they are available, and if not fall back to a CommonJS loader (at least in this configuration). Our ESM files and CommonJS loader have slightly different signatures, necessitating this update.

I've also got the imports working against the Bootstrap 5 styles for DataTables now (the -bs5 addition to the imports) so it just pulls the correct defaults for BS5.

Finally, I noticed in the getting started guide, the CSS import for DataTables can be slightly simplified to be:

@import 'datatables.net-bs5';
@import 'datatables.net-buttons-bs5';
@import 'datatables.net-select-bs5';

No need to specify the files any more (that used to be the case, but we use the style property in the package.json file, and Vite picks that).

Nice getting started guide btw! Its very satisfying to see a populated and styled table so quickly.

Allan

allan

@RachelGomez - Thank you. Although I'm not clear on how it relates to the original discussion here?

Allan