`hx-swap=innerHTML` not injecting element when using `hx-ext=sse`

[denisvolokh]

Hi,

I attempted to retrieve updates from the server every 1 second and inject the rendered elements into the table. This approach is working perfectly.

<tbody
    hx-get="/orderbook/update"
    hx-trigger="load, every 1s"
    hx-swap="innerHTML"
>
    <!-- Order Book data will be injected here -->
</tbody>

However, when I switch to Server-Sent Events (SSE) using the extension, I can see events and messages reaching the front end, but they are not being injected into the DOM.

<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script>
...
<tbody
    hx-ext="sse"
    sse-connect="/orderbook/stream"
    hx-swap="innerHTML"
>
    <!-- Order Book data will be injected here -->      
  </tbody>

Am I missing something in SSE configuration?

[MichaelWest22]

It looks like you have v1 of htmx which has built in experimental sse support. see https://v1.htmx.org/extensions/server-sent-events/

In v2 of htmx this has been moved into a seperate extension which is what you have linked to but this may only work with htmx v2. So i would try with only v1 only or upgrade your htmx to v2 and follow https://htmx.org/extensions/sse/

[denisvolokh]

Thank you @MichaelWest22 for pointing out at the version.

Here is the code that works:

<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script>
...
<tbody
    hx-ext="sse"
    sse-swap="message"
    sse-connect="/orderbook/stream">
</tbody>