Phoenix liveview fail on one computer

BTW

elixir version…

Elixir 1.13.0

phoenix version…

  {:phoenix, "~> 1.6.0"},

Tested also with elixir 1.12

Hi, I would discard a problem on client side( client machine or browser)

I just tested with client on a different machine (firefox and chromium) and it didn’t work

I think is a problem on the server machine, but I don’t know where it could be

You are not really making it easy to help you. Your case lacks so much vital information. You should REALLY put this vital information into first post.

I have problems with my code, with a new project, with code from examples from Chris MacCord on github. And only fails on one machine. The same code in 3 different machines, works perfectly

Reading this you are probably missing something all these projects need. Lot of example and default project needs PostgreSQL to be installed. Do you have it installed on computer that fails with same passwords etc? You can also create new LiveView project that doesn’t need PostgreSQL using some parameters that I can’t remember.

1 Like

maybe you can upload it so we can see whole source code

I know there are something missing, but I don’t know what, or how to investigate to detected what is wrong in this computer

I’m trying to give you proper information about the problem, and also I’m trying to avoid not valid datas

For example, about postgresql, I ran projects with --no-ecto and no postgresql or any other database dependency at all

I run on different machines, non of them with postgresql installed (no server, no cli)
In all machines work, excepting the mysterious one

I will develop a minimal project on a computer that works, I will download on the machine that fails, and I will share this project with you. I don’t think it will be help a lot, but I could be wrong

Do elixir --version and check that both Erlang/OTP and Elixir versions match between the computers.

Here you have a very simple project with an example that works in all computers excepting one

It has been created with mix phx.new mini_live_view --no-ecto, and I modified just the router.ex to put

live "/", CounterLive

And two very small files for CounterLive

The machine with the problem…

> elixir --version
Erlang/OTP 24 [erts-12.1.5] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

I tested this with Elixir 1.12.x and Elixir 1.13 on four computers. Only one of them fails, no matter Elixir 1.12.x or Elixir 1.13.0 :open_mouth:

I also asked to check Erlang/OTP versions, are they same?

This is one machine that works normally

❯ elixir --version
Erlang/OTP 24 [erts-12.1.5] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

This is in the machine that fails

> elixir --version
Erlang/OTP 24 [erts-12.1.5] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

The machine that works, is a fresh installation (few days ago)
The other one, is a rolling release. On this machine, everything was working fine with phoenix/liveview till some days ago

I have no clue of what happened :frowning:
And I didn’t detect any other fail on this machine. Everything looks working fine the only problem I detected, is this with phoenix/liveview :open_mouth:

You don’t happen to have anything else running in port 4000 in that machine? Try running Phoenix in different port than default 4000 and see what happens.

I tested with ports 4002, 4003 and 4050 and same behaviour on all of them

Phoenix works as it serves pages, but liveview doesn’t work :frowning:

Can you answer/check these as well? Also on the computer that isn’t working what OS are you running, what version of nodejs (if applicable), are there any errors in the js console, and is the live view websocket being established?

One clue here is that you don’t have liveSocket variable available in your console. I created a default Phoenix 1.6 app without Ecto. If I go to 127.0.0.1 liveSocket variable exists in Chrome Developer tools console. Are you sure app.js is loaded? Check Chrome Developer tools Network tab and make sure it’s actually loaded by the browser.

As a side note even if you said you didn’t use Brave browser, but as a warning it has known issue with WebSockets. WebSockets sometimes hang in that browser and I think you have to close the whole browser to get them working again.

I tested with firefox and chromium

No plugins installed, no extensions, no ad blockers

On server side, nothing different on log, no errors, nothing different

On browser, there are no errors con console

I debugged the LiveSocket creation on browser, it executed all lines, no errors reported

The computer with the problem is running manjaro.

You are right, I have an error on browser console when I try

liveSocket.enableDebug()

VM41:1 Uncaught TypeError: liveSocket.enableDebug is not a function
    at <anonymous>:1:12

But if I run

liveSocket.params

It returns

ƒ () {
              return e2;
            }

I putted a breakpoint on LiveSocket constructor, and all lines were executed with no errors

Run just liveSocket is it type LiveSocket?

I’ve put a breakpoint in app.js, all code is executed with no errors :open_mouth:

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

If you look at 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/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.