how to enable extensions in a es6 module using importmap

[tacman]

I've install html and the debug extension, and have loaded them in app.js

import htmx from 'htmx.org';
window.htmx = htmx; // make it global

import debug from 'htmx.org/dist/ext/debug.js' // ??

This fails with

uncaught SyntaxError: The requested module 'htmx.org/dist/ext/debug.js' does not provide an export named 'default' (at app-2bdca9ff3c358a7277b5e08c7cf00b92.js:18:8)

The documentation show unpkg, but I'm working on an offline project and it needs to run locally, via a downloaded file from jsdelivr.

If I simply import it,

import 'htmx.org/dist/ext/debug.js'
import htmx from 'htmx.org';

I get this:

debug-17c2c854cd123dadbaff92526c7d628c.js:7 Uncaught ReferenceError: htmx is not defined at debug-17c2c854cd123dadbaff92526c7d628c.js:7:1

Thanks.

[andryyy]

Do you need more than a simple htmx.logAll()?

[tacman]

Do you need more than a simple htmx.logAll()?

No, I'm a newbie that I simply googled "htmx debug" and saw the extension. But in fact, logAll() does exactly what I was looking for. Thanks!!

[tacman]

Reopening, because the original issue of how to enable extensions persists.

import 'htmx.org/dist/ext/client-side-templates.js';

Same error:

client-side-templates-9a1d1255c92f0d36a12f23f6d1fb02f9.js:7 Uncaught ReferenceError: htmx is not defined at client-side-templates-9a1d1255c92f0d36a12f23f6d1fb02f9.js:7:1

Is there a way to "connect" htmx to the extension in javascript, to avoid this error?

[tacman]

I used to have the problem frequently with jquery plugins, saying jquery wasn't defined.

Here's the actual offending code.

/**
 * Bundled by jsDelivr using Rollup v2.79.1 and Terser v5.19.2.
 * Original file: /npm/[email protected]/dist/ext/client-side-templates.js
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
htmx.defineExtension("client-side-templates", {
    transformResponse: function(e, t, r) {
        var n = htmx.closest(r, "[mustache-template]");
        if (n) {
            var a = JSON.parse(e)
              , s = n.getAttribute("mustache-template");
            if (S = htmx.find("#" + s))
    ```

[andryyy]

I think they are working on improving that for v2. But I can’t say for sure.

[tacman]

I see #1655 also mentions importmaps and es6, I'll change the title because indeed that's the key issues.

es6 and javascript modules are great, and importmaps eliminate the need for build systems.

I hope it get solved!

[tacman]

I see in #2579 that there's a 2.0 beta now! Hopefully these extensions will be able to be included as modules, as I see that @Telroshan has tagged with with 2.0. Let me know when/how to test!

[Telroshan]

Hey, unfortunately I'm a bit lost when it comes to those modules stuff, though for htmx 2 we moved extensions to a separate repository, where each extension now has its own npm package. Could you test with latest htmx 2 beta version and those new extensions and let me know how it goes?

[1klap]

Coming in after the 2.0.0 release: I was not able to load the SSE-extension as a module with importmaps, because it is not written as such (cf here: https://github.com/bigskysoftware/htmx-extensions/blob/main/src/sse/sse.js). Although htmx seems to ship a module version for the main lib, I think the extensions are not compatible with this.

My workaround was to fall back to script tags, but save the htmx.js and htmx-ext-ssr.js libs to my device and serve them myself with script tags (as htmx documents in their examples) for offline functionality

[donseba]

@1klap I also use importmaps and the following works for me :

I updated to htmx.esm.js from the v2 release.

Then I added this line to the top of sse.js file: import htmx from 'htmx';

you might also need to load a es-module-shims.js beforehand

  <script async src="/assets/js/es-module-shims.js"></script>
  <script type="importmap">
    {
      "imports": {
         "htmx": "/assets/js/htmx.esm.js",
          "htmx-ext-sse": "/assets/js/ext/htmx-ext-sse.js"
       }
    }
  </script>
  
  <script type="module">
    import 'htmx';
    import 'htmx-ext-sse';
  </script>

[edgmic]

For me works in app.js:

import * as htmx from 'htmx';

window.htmx = htmx;

My import map:

<script type="importmap">
    {
        "imports": {
            "htmx": "https://unpkg.com/[email protected]",
            "app": "{% static 'js/app.js' %}",
            "formset": "{% static 'js/formset.js' %}",
        }
    }
</script>
<link rel="modulepreload" href="https://unpkg.com/[email protected]" />
<link rel="modulepreload" href="{% static 'js/app.js' %}" />

[marisst]

@tacman @andryyy @1klap @donseba @edgmic good news - I implemented the possibility to import HTMX extensions as ESM modules in this PR. Please check it out. If it gets merged, it will be possible to do this without workarounds:

import `htmx.org`;
import `htmx-ext-extension-name`; // Replace `extension-name` with the extension name