Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSE extension: api.swap is not a function #2501

Closed
robinelvin opened this issue Apr 23, 2024 · 2 comments
Closed

SSE extension: api.swap is not a function #2501

robinelvin opened this issue Apr 23, 2024 · 2 comments

Comments

@robinelvin
Copy link

robinelvin commented Apr 23, 2024

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.

image

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
Copy link
Collaborator

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
Copy link
Author

Thanks, I hadn't spotted that!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants