Liveview hooks error: unable to push hook event. LiveView not connected - abort

The code below produces these errors

hook: unable to push hook event. LiveView not connected - abort
hook: unable to push hook event. LiveView not connected - start

The socket is working because I can push from the server.

What am I doing wrong?

Object { __view: {…}, liveSocket: {…}, __callbacks: {…}, __listeners: Set(3), __isDisconnected: false, el: div#pushed, mounted: mounted()
 }
​
__callbacks: Object { mounted: mounted()
 }
​
__isDisconnected: false
​
__listeners: Set(3) [ callbackRef(customEvent, bypass), callbackRef(customEvent, bypass), callbackRef(customEvent, bypass)
 ]
​
__view: Object { isDead: true, ref: 0, childJoins: 0, … }
​
el: <div id="pushed" phx-hook="El">​
liveSocket: Object { unloaded: false, socket: {…}, bindingPrefix: "phx-", … }
​
mounted: function mounted()
<div id="pushed" phx-hook="El"></div> 
let Hooks = {};
Hooks.El = {
  mounted() {
    document.addEventListener("start", e => {
      console.log(this)
      this.pushEvent(e.detail.event, currentTabId, (reply, ref) => {
        console.log(reply)
        console.log(ref)
      });
    });
    document.addEventListener("abort", e => {
      console.log(this)
      this.pushEvent(e.detail.event, currentTabId, (reply, ref) => {
        console.log(reply)
        console.log(ref)
      });
    });
  }
};
    let button_event = new CustomEvent("abort", {
      detail: { event: "abort", payload: {} },
    });
    document.dispatchEvent(button_event);

...
    let button_event = new CustomEvent("start", {
      detail: { event: "start", payload: {} },
    });
    document.dispatchEvent(button_event);

If it’s saying not connected, have you confirmed that LiveView is connected? Do you see errors in the backend logs?

1 Like

No errors, anytime before or after this I can push events from server to client.

Just to be clear as the title has changed. Abort is the event name. Whatever the event name may be, it will follow the error like hook: unable to push hook event. LiveView not connected - NAME OF CUSTOM EVENT

Might it have something to do with the path of the heex? lib/session/gatekeeper/gatekeeper.html.heex

Where are you calling that from? And are you calling it after the item with the hook is mounted?

I tend to put my event listeners on the hook element, rather than the document.