Bug: bootstrap5 ESM/ non-jQuery initialization crashes due to Responsive plugin

[webketje]

When imported in an NPM package context as instructed in https://datatables.net/download/npm#ES-module-loader:

import DataTable from 'datatables.net-bs5'
import 'datatables.net-responsive-bs5'

this line https://github.com/DataTables/Responsive/blob/3.0.0/js/responsive.bootstrap5.js#L5 fails due to error:

Uncaught TypeError: dataTables_bootstrap5_default.Responsive is undefined
    mjs responsive.bootstrap5.mjs:13
    __init app.js:38
    js TransactionsTable.js:2
    __init app.js:38
    js index.js:1
    __require app.js:41
    <anonymous> app.js:42837
    <anonymous> app.js:42838

My guess is that this is because here: https://github.com/DataTables/Responsive/blob/3.0.0/js/dataTables.responsive.js#L1719 Responsive is only added to $.fn.DataTable and $.fn.dataTable, but not to DataTable and that this may work in a global browser window context somehow, but fails when using an ESM bundler.

I have not tested extensively but this issue may also be present for other integrations

[AllanJard]

It appears to work okay here: https://stackblitz.com/edit/vitejs-vite-2e8adu?file=index.html%2Csrc%2Fstyle.css%2Csrc%2Fmain.ts&terminal=dev .

Can you link to a test case showing the issue please?

[imran-saleem834]

Facing same issue

[AllanJard]

@imran-saleem834 can you update my test case to die the issue please? As you can see, it is running okay there.

[imran-saleem834]

Please refer to the following StackBlitz project for an example of initializing DataTables in a Vue 3 and Bootstrap 5 environment without using jQuery: https://stackblitz.com/edit/datatables-net-vue3-bootstrap5-bkoavj.

This code has been updated from a previous version, which can be found here: https://stackblitz.com/edit/datatables-net-vue3-bootstrap5.

For a visual reference, see the screenshot from the DataTables/Responsive repository on GitHub.

[webketje]

@AllanJard I tried to reproduce with my setup but failed: https://stackblitz.com/edit/vitejs-vite-vbqxc8?file=src%2Fmain-mjs.js. In this sample npm run preview will spin up a server with 2 pages, 1 with the default imports and 1 with the explicit .mjs imports. Both work here, however in my real project, it would only work when I explicitly imported an extensionless import (eg import DataTable from 'datatables.net-bs5/js/dataTables.bootstrap5') and noticed it used the IIFE version in source maps.

Some of this may be related to unusual usage of the .mjs extension on the front-end and its interpretation by bundlers (most packages with ESM exports write them to sth. like datataTables.bootstrap5.esm.js), in the esbuild docs https://esbuild.github.io/content-types/#javascript-caveats:

By default, esbuild will use the Babel interpretation. If you want esbuild to use the Node interpretation instead, you need to either put your code in a file ending in .mts or .mjs, or you need to add "type": "module" to your package.json file. The rationale is that Node's native ESM support can only run ESM code if the file extension is .mjs or "type": "module" is present, so doing that is a good signal that the code is intended to be run in Node, and should therefore use the Node interpretation of default import. This is the same heuristic that Webpack uses.

Note: Vite also uses esbuild

[AllanJard]

@imran-saleem834 Thank you. I think there is a mix of versions there due to the Vue component which I've still to update for DataTables 2. That should be happening in the next few days all being well.

@webketje I've noticed with one or two other support cases that deleting the package-lock.json file and node_modules, then doing a reinstall can fix this (obviously have a backup or source control in case the wheels come off!). I think there was an error in my earlier version dependencies.

[webketje]

Ah that could explain the struggle to reproduce.. I will definitely revisit this issue in my local setup later. Can we leave this issue open for a bit longer so that other users hitting it easily find it and can add their findings/ continue on our previous investigation

[AllanJard]

Absolutely. Let me know how you get on with a reinstall.