Phoenix liveview fail on one computer

Sadly I cannot reproduce the problem any more

After moving .cache to .cache.old and deleting priv/static/assets, it worked (assets where regenerated on mix phx.server correctly)

Then I deleted .cache and moved back .cache.old to .cache, and deleted again priv/static/assets in order to reproduce the problem and investigate what was producing this behavour… but… it didn’t fail anymore

I’ve created a new project with the “original and perhaps corrupted cache”, and everything is working fine

Perhaps, I did a mistake, and I didn’t close a browser when manipulating .cache folder. Not sure

I’m not happy because I cannot reproduce the problem and try to understand the exact point that produced it. I also was interested on checking if could be possible to have better information on phoenix side when problems arrive.

The app.js as derek-zhou detected was wrong, probably because someone (esbuild?) was getting an old and invalid version from .cache
After manipulating this folder… it worked due to… don’t know, could be due to updated timestamps, running application…

Thank to all of you, I learned a lot trying to understand this problem

ALMOST SOLVED!!!

I’ve moved the full .cache folder to a new name, and it’s WORKING!!!

now I’m going to check what is producing this inside this folder

BUM!!!
They are different!!! quite different

I cannot put the differences here because is a huge file and there are many differences
I have no idea of what can be happening with esbuild, I’m going to try to investigate and try to solve it

I’ll keep you informed if I can get any advance about it
Regards

Now you have the same project, built in 2 different machines, one working, one not working. Can you compare priv/static/assets/app.js from the 2 machines. Are they the same? If not, then your esbuild did not do the right thing on the bad machine.

I’ve deleted cache, not fixed
I’ve moved full browser folder (chromium and firefox), therefore starting with a new instalation, same behaviour

I’ve installed brave browser, and no changes
Liveview doesn’t work, and liveSocket returns root instead of roots

good point about root vs roots

I runned on a “normal” computer, and the exit of liveView is…

LiveSocket {unloaded: false, socket: Socket, bindingPrefix: 'phx-', opts: {…}, params: ƒ, …}
activeElement: null
bindingPrefix: "phx-"
boundTopLevelEvents: true
currentLocation: {ancestorOrigins: {…}, href: 'http://localhost:4000/', origin: 'http://localhost:4000', protocol: 'http:', host: 'localhost:4000', …}
defaults: {debounce: 300, throttle: 300}
domCallbacks: {onNodeAdded: ƒ, onBeforeElUpdated: ƒ}
hooks: {}
href: "http://localhost:4000/"
linkRef: 1
loaderTimeout: 1
localStorage: Storage {length: 0}
main: View {liveSocket: LiveSocket, flash: null, parent: null, root: View, el: div#phx-FsWg_mP454K4MwBh.phx-connected, …}
metadataCallbacks: {}
opts: {params: {…}}
params: ƒ ()
pendingLink: null
prevActive: null
roots: {phx-FsWg_mP454K4MwBh: View}
sessionStorage: Storage {length: 0}
silenced: false
socket: Socket {stateChangeCallbacks: {…}, channels: Array(1), sendBuffer: Array(0), ref: 4, timeout: 10000, …}
transitions: TransitionSet {transitions: Set(0), pendingOps: Array(0)}
unloaded: false
uploaders: {}
viewLogger: undefined
[[Prototype]]: Object

There are some diferences

Anyway your JavaScript file your browser gets is quite likely from old LiveView. Now you just have to find out why this is happening. I would close all tabs and clear browser cache.

same project on different machine has enableDebug and runs as espected

These are dependencies on mix.exs

      {:phoenix, "~> 1.6.5"},
      {:phoenix_html, "~> 3.0"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.17.5"},

The client (browser) console, propose in autocompletio enableDebug (twice), but it returns an error when invoqued

If you look at phoenix_live_view/assets/js/phoenix_live_view/live_socket.js at 1480b49e52e973f551c88bede2f802e5f5d8c298 · phoenixframework/phoenix_live_view · GitHub

You can see that LiveSocket should have function called enableDebug
also your object has field root but newest LiveSocket should have field called roots phoenix_live_view/assets/js/phoenix_live_view/live_socket.js at 1480b49e52e973f551c88bede2f802e5f5d8c298 · phoenixframework/phoenix_live_view · GitHub

I don’t think you are running the latest LiveView. I just created new project with latest LiveView and object has field roots.

By running mix phx.new --version I get Phoenix installer v1.6.5.

This is the result of executing liveSocket on console

e2 {unloaded: false, socket: Socket, bindingPrefix: 'phx-', opts: {…}, views: {…}, …}
activeElement: null
bindingPrefix: "phx-"
currentLocation: {ancestorOrigins: {…}, href: 'http://localhost:4002/new_oper', origin: 'http://localhost:4002', protocol: 'http:', host: 'localhost:4002', …}
hooks: {}
href: "http://localhost:4002/new_oper"
linkRef: 0
main: null
opts: {params: {…}}
params: ƒ ()
pendingLink: null
prevActive: null
prevInput: null
prevValue: null
root: null
silenced: false
socket: Socket {stateChangeCallbacks: {…}, channels: Array(0), sendBuffer: Array(0), ref: 4, timeout: 10000, …}
unloaded: false
viewLogger: undefined
views: {}
[[Prototype]]: Object