DataTableBs5 import error

DataTableBs5 import error

adrianorodriguesadrianorodrigues Posts: 3Questions: 0Answers: 0

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.

Replies

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

    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

  • adrianorodriguesadrianorodrigues Posts: 3Questions: 0Answers: 0

    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

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

    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

  • adrianorodriguesadrianorodrigues Posts: 3Questions: 0Answers: 0

    Hi Allan, here is the git repo:

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

    Thanks!

  • arkainarkain Posts: 1Questions: 0Answers: 0

    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?

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

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

    Allan

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

    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

  • yajrayajra Posts: 14Questions: 1Answers: 1

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

    Reasons:

    Works well on v1.12.1

    Thanks!

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

    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

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin

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

    Allan

Sign In or Register to comment.