LiveView: (ArgumentError) assign @count not available in eex template

Questions / Help
1

I have a LiveView with the following code:

defmodule Webcandy2LocalWeb.CounterLive do
  use Phoenix.LiveView

  def mount(_session, socket) do
    socket = assign(socket, :count, 0)
    {:ok, socket}
  end

  def render(assigns) do
    ~L"""
    <h1>Count: <%= @count %></h1>
    <button>+</button>
    <button>-</button>
    """
  end
end

When I try to access the page for this LiveView, I get the following error:

Request: GET /counter
** (exit) an exception was raised:
    ** (ArgumentError) assign @count not available in eex template.

Please make sure all proper assigns have been set. If this
is a child template, ensure assigns are given explicitly by
the parent template as they are not automatically forwarded.

Available assigns: [:flash, :live_action, :live_module, :socket]

I don’t see why this is happening because I assign :count in the mount/2 function. Is there something I’m missing?

2

mount/2 is now mount/3, depending on your version of phoenix liveview.

5 Likes
3

Thank you! Idk if this would warrant a new thread but I have another question. Now that I can load the page, it seems like things are not updating. Here is the rest of my code:

...
  def render(assigns) do
    ~L"""
    <h1>Count: <%= @count %></h1>
    <button phx-click="increment">+</button>
    <button phx-click="decrement">-</button>
    """
  end

  def handle_event("increment", _value, socket) do
    count = socket.assigns.count + 1
    socket = assign(socket, :count, count)
    {:noreply, socket}
  end

  def handle_event("decrement", _value, socket) do
    count = socket.assigns.count - 1
    socket = assign(socket, :count, count)
    {:noreply, socket}
  end

I’ve set up my LiveView install according to the docs, and the docs also show handle_event/3 being used like this. When I open the network tab of the developer console, I don’t see anything when I click the buttons. Any idea what could be wrong?

4

ok i’m flying totally in the dark here, so huge props to me if I get this right, lol.

seems like your liveview is mounting only over html and not over the socket. Check to make sure your /js/app.js is after your crsf_meta_tag() function call in the app.html.eex. And it might help? (probably not), to have that be after the render call. The recommended places to put these swapped not to long ago IIRC.

You can generally check to see if it’s mounted by placing some sort of sentinel inside the “mount” call. Usually I like to self() |> IO.inspect(label: "foo") and watch two distinct PIDs fly by in my console when I mount. If you see only one, it’s a sure sign that the websocket (second) mount didn’t happen.

Also for things that are not customer-facing (like operator dashboards) it’s good to put a sentinel inside of your assigns, I have a @live assign which is true when on the second mount, that makes it say [live] or [not live] as expected. Liveness can be ascertained using the connected?/1 function inside your mount.

1 Like
5

Which version of live view are you using. If you are using v0.10.0 or above please check this
https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-live-layouts

Live view layouts have changed and it might so happen that your app.js is not being called at all.

1 Like
6

I indeed only see one ID flash. It’s strange that it can get the initial value set in mount, but further events don’t work…

My /js/app.js does come after csrf_meta_tag(). It is in the body, while CSRF is in the head. I think my whole of app.html.eex was just auto-generated and I never needed to touch it because everything the guide recommended was already there.

7

ah. Two last things to check: 1) check the JS dev panel to make sure there aren’t any strange things happpening. 2) I don’t know why but my liveview page just stopped working on firefox. Well no. It didn’t stop working, I just had to wait 5 minutes for the page to second-mount (and only in my staging environment, not in dev or in prod). No JS errors were thrown. I didn’t know how to make this reproducible for the liveview team to check up on, so I didn’t report the error, so I had to start using chrome. Lmk if this is something you see. I’m on FF 74.0

8

Please check the rendered html in the browser and make sure app.js is loaded. By what it looks like to me, I think there’s a high chance it’s not included. If you don’t see app.js there, then check @sreyansjain suggestion above.

9

Here I did it by doing this:
router.ex:
…

   pipeline: browser
     plug: accepts, ["html"]
     plug: fetch_session
     #plug: fetch_flash
     plug: fetch_live_flash
     plug: protect_from_forgery
     plug: put_secure_browser_headers
  + plug: put_root_layout, {Webcandy2LocalWeb.LayoutView,: app}

in the app.html.eex replaces:

- <main role = "main" class = "container <% = Enum.at (@ conn.path_info, 0)%>">
-   <p class = "alert alert-info" role = "alert"> <% = get_flash (@conn,: info)%> </p>
-   <p class = "alert alert-danger" role = "alert"> <% = get_flash (@conn,: error)%> </p>
-   <% = render @view_module, @view_template, assigns%>
- </main>
+ <%= @inner_content %>
10

this means the mount function has 3 params. this change worked for me :

    def mount(_session, _, socket) do
        socket = assign(socket, :count, 0)
        {:ok, socket}
    end

ie. add an underscore as the 2nd param.

if you followed along with James Moore’s excellent intro video on YouTube - Phoenix LiveView for web developers who don’t know Elixir. then the change above is what you need to make the latest version of Phoenix work AND you should have created the initial project with the --live option.

$ mix phx.new counter --no-ecto --live