Phoenix_live_view: Cannot create property 'dynamics' (with Gettext)

Created on 9 Jul 2019 · 8Comments · Source: phoenixframework/phoenix_live_view

Environment

Elixir version (elixir -v): Elixir 1.8.2
Phoenix version (mix deps): phoenix 1.4.8
NodeJS version (node -v): v10.16.0
NPM version (npm -v): 6.9.0
Operating system: Mint 19.

Actual behavior

Using gettext with the component below results in a error on the client (no logs on the server):

 defmodule MyAppWeb.ComponentLive do
   use Phoenix.LiveView
   import MyAppWeb.Gettext

   def render(assigns) do
     ~L"""
     <%= if @state == :fetched do %>
       <%= for message <- @messages do %>
         <div><%= message %></div>
       <% end %>
     <% else %>
       <div><%= gettext "Loading..." %></div>
     <% end %>
     """
   end

   def mount(session, socket) do
     Process.send_after(self(), :fetch_messages, 1000)
     {:ok, assign(socket, :state, :loading)}
   end

   def handle_info(:fetch_messages, socket) do
     {:noreply,
       socket
       |> assign(:messages, ["Hello", "There"])
       |> assign(:state, :fetched)
     }
   end
end

After one second, this error is shown:

If I replace the gettext call with a static div (<div>Loading...</div>) it works correctly.

Expected behavior

I'm not sure, but this seems like an issue with DOM diffing on the client. This was the simplest component to reproduce this issue, but I'm glad to help with more information if you guys need it :green_heart:

Oh, and before I forget, thanks for the great work on LiveView!

bug

Source

luizpvas

👍4

All 8 comments

I think this issue is not related to Gettext.

I encountered the same problem with the following .leex template:

<%= if @selected_team == :none do %>
  <ul>
    <%= for team <- @teams do %>
      <li>
        <a phx-click="select_team" phx-value="<%= team.id %>"><%= team.name %></a>
      </li>
    <% end %>
  </ul>
<% else %>
  <h1><%= @selected_team.name %></h1>

  <div><a phx-click="select_team" phx-value="">List of teams</a></div>
<% end %>

kuroda on 27 Jul 2019

Somewhat peculiarly, rewriting the above code as follows will eliminate the error.

<% style = if @selected_team == :none, do: "", else: "display: none" %>

<ul style="<%= style %>">
  <%= for team <- @teams do %>
    <li>
      <a phx-click="select_team" phx-value="<%= team.id %>"><%= team.name %></a>
    </li>
  <% end %>
</ul>

<%= if @selected_team != :none do %>
  <h1><%= @selected_team.name %></h1>

  <div><a phx-click="select_team" phx-value="">List of teams</a></div>
<% end %>

kuroda on 27 Jul 2019

👍1

I also ran into this with gettext. Simple work-around was to add a if true do conditional around it.

oskarkook on 31 Jul 2019

👀1

Seems to be an issue with if-else. I encountered the same issue and was able to resolve it by replacing the if-else with a single if and a single unless (for the else).