LiveView connection breaks in Phoenix 1.6

Phoenix Forum Questions / Help
, ,
1

Hello,

I have encountered very interesting problem during update from Phoenix 1.5 to Phoenix 1.6.

Our phoenix 1.5 app already used LiveView version 0.17.6 and we had esbuild / heex in place (and we’re using Tailwind), and everything works just fine when I have Phoenix up to 1.15.13. As soon as I update to Phoenix 1.16.0 (minor version does not matter) I am getting the following error in the browser (LiveView connection establishes successfully on the server side).

Uncaught TypeError: Cannot read properties of null (reading 'el')
    at LiveSocket.replaceMain (VM38:6152:62)
    at VM38:6510:14
    at LiveSocket.withPageLoading (VM38:6490:25)
    at LiveSocket.historyRedirect (VM38:6509:12)
    at View.onLiveRedirect (VM38:5377:23)
    at finish (VM38:5489:20)
    at Object.callback (VM38:5502:13)
    at VM38:1947:73
    at Array.forEach (<anonymous>)
    at Push.matchReceive (VM38:1947:56)

From my debugging session I do see that this.main is always null.

Elixir version: 1.13
OTP: 24
OS: MacOS Ventura / Linux

To be frank, I am out of ideas, because the whole setup looks correct and I am getting the very same problem with brand new Phoenix 1.6 project.

2

Alright, the problem is fixed in LiveView version 0.17.14 (liveSocket.js, joinRootViews function was using getAttribute function instead of hasAttribute), I have forked the repo, rebuilt the assets of phoenix_live_view and it works fine.

I hope phoenix_live_view team will merge the updated changes soon, so they will be generally available.

3

If you can’t update to latest 0.18.x, LV 0.17.15 was just released which addresses this

2 Likes