SSE extension: api.swap is not a function

[robinelvin]

I'm bundling htmx.org and htmx-ext-sse with esbuild. My entrypoint is:

import('htmx.org').then((htmx) => {
    window['htmx'] = htmx.default;
    import('htmx-ext-sse').then((sse) => {
        console.log('HTMX', htmx.default);
        console.log('SSE', sse.default)
    });
});

I also added this piece of HTML to my page:

<div  hx-ext="sse" sse-connect="/events">
<div sse-swap="TestMessage">This will be replaced</div>
</div>

When the page loads the browser connects to my events stream but the content is not replaced. In the console I get:

Uncaught TypeError: api.swap is not a function
    at swap (index-MBVZABLO.js:3263:15)
    at EventSource.listener (index-MBVZABLO.js:3163:17)
swap @ index-MBVZABLO.js:3263
listener @ index-MBVZABLO.js:3163

Putting in a breakpoint and inspecting the api object does indeed show there is no swap function on that object. So it appears the SSE extension is loading but something's not quite right.

It could well be something to do with the bundle but I've tried reading tickets related to this and I can't see a solution. I have tried using esbuild-plugin-external-global but this didn't appear to make any difference.

EDIT: Changing the HTML swap attribute from sse-swap="TestMessage" to hx-sse="swap:TestMessage" works.

htmx.org 1.9.12
htmx-ext-sse 2.1.0

[Telroshan]

Hey, it looks like you're using the new SSE extension from the separate repo, aka extensions.htmx.org
Please note that as stated on the latter website

This site is a searchable collection of extensions for htmx 2.0. They are not guaranteed to work with the htmx 1.x codebase.

swap is an API change introduced in htmx 2 and is indeed not in htmx 1 codebase.
You might want to use htmx 2 beta if you want to use this version of the SSE extension, otherwise you may use the sse that's in this very repo's dist/ext folder.

Hope this helps!

[robinelvin]

Thanks, I hadn't spotted that!