Using Editor as ESM module does not work for me

karlwarm

My code uses the following components without any package manager:
* Bootstrap 5.3.3
* Datatables 2.1.8
* Editor 2.3.2 as Trial Version.

I try to use DataTables and the Editor extension as ESM modules, using an importmap in the outer HTML:

    <script type="importmap"> {
        "imports": {
                "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper-base.min.js",
                "bootstrap5": "/components/bootstrap5/js/bootstrap.esm.min.js",

                "jquery": "/components/datatables2/js/jquery371.mjs",
                "datatables.net": "/components/datatables2/js/dataTables.min.mjs",
                "datatables.net-bs5": "/components/datatables2/js/dataTables.bootstrap5.min.mjs",
                "datatables.net-dt": "/components/datatables2/js/dataTables.dataTables.min.mjs",

                "datatables.net-select": "/components/datatables2/js/dataTables.select.min.mjs",
                "datatables.net-select-bs5": "/components/datatables2/js/select.bootstrap5.min.mjs",
                "datatables.net-buttons": "/components/datatables2/js/dataTables.buttons.min.mjs",
                "datatables.net-buttons-bs5": "/components/datatables2/js/buttons.bootstrap5.min.mjs",

                "datatables.net-editor": "/components/datatables2/editor/dataTables.editor.min.mjs",
                "datatables.net-editor-2025-01-05": "/components/datatables2/editor/editor.dataTables.min.mjs",
                "datatables.net-editor-2025-01-05-bs5": "/components/datatables2/editor/editor.bootstrap5.mjs"
        }
    }
    </script>

When trying to edit or create a selected table row, I get the following Javascript error:

editor.bootstrap5.mjs
Exception on Line 121: TypeError: Cannot read properties of undefined (reading 'Modal')

This might be due to an undefined "window.bootstrap" variable, which has not been set via the Module mechanism.
Line 92: let _bs = window.bootstrap;

I can avoid this error in two ways:

One: Insert the non-ESM Bootstrap5 Javascript directly in the calling HTML file. Now global "window.bootstrap" is set and the Editor is displaying the Bootstrap5 Modal as expected.

<script src="/components/bootstrap5/js/bootstrap.min.js"></script>

Two: Don't use the Bootstrap5 styling at all, but use the dataTables styling. This style works as a module out of the box.

My question is: How can I use Editor with Bootstrap5 as an ESM module?
Any help would be gladly appreciated.

allan

Try:

import * as bootstrap from 'bootstrap5';
import Editor from 'datatables.net-editor-2025-01-05-bs5';
// import ... etc

DataTable.Editor.bootstrap( bootstrap );

which will set the instance of Bootstrap that Editor is looking for.

Editor 2.4 and DataTables 2.2 are going to simplify all of this. You'll be able to simply do DataTable.use(bootstrap); with the upcoming combination (and that will be properly documented in the download builder).

Allan

karlwarm

Thank you very much for your exceptionally quick response, Allan.
I got it working, so I can really start experimenting with DataTables and Editor.

I have been pretty close to the solution, but needed the final glue what to provide as parameter to the bootstrap() function.

Frohe Weihnachten from Germany
Karl