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/htmx.org@1.9.10/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