Phoenix liveview fail on one computer

[jle]

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

[wanton7]

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.

[jle]

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

[jle]

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

[derek-zhou]

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.

[jle]

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

[jle]

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

[jle]

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