Advices on using an ESM bundle of DataTables in Quarto?

[mwouts]

Description

Hello, I maintain a wrapper of DataTables for Python DataFrames called itables.

The version 1.7 of ITables works well with Quarto, as documented at https://mwouts.github.io/itables/quarto.html.

Recently I have been working on ITables v2.0, which will transition to DataTables v2.0 and also provide the buttons and some other extensions.

That is a significant change. In particular, in the offline mode, I changed itables/html/datatables_template.html and I now use new DataTable(table, dt_args); rather than new $.fn.dataTable(table, dt_args);. That seems to be incompatible with Quarto, and I now get the following error when compiling the example quarto_html.qmd document:

Uncaught TypeError: $t.default.ext is undefined
Uncaught Error: Mismatched anonymous define() module: function(b){return r(b,window,document)}
https://requirejs.org/docs/errors.html#mismatch
    makeError https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    T https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    s https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1

Do you think you could provide some hints on how to address this? I have opened the following issue at ITables: mwouts/itables#238. Thanks!

[mwouts]

The issue disappeared when I removed the colreorder extension. So all good now!

[cscheid]

Great to hear! What's probably happening is that colreorder is using requirejs, some part of Quarto is also doing it, and they're stepping on each other's toes. I'd love to one day move everything in Quarto's JS to pure ES6 imports only with no CJS compatibility code of any kind, but that's a long project.