LiveView console error - no id found for undefined phoenix_live_view.js

Phoenix Forum Questions / Help
,
1

Hello everyone,

Can you please help me out here? I am trying to configure Live View following the documentations instructions but keep getting this error in the console:

Screenshot from 2021-07-23 21-35-08
Screenshot from 2021-07-23 21-35-08963Ă—112 20.5 KB

no id found for  undefined phoenix_live_view.js:427:39
    K webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:427
    byId webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:1718
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:1977
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2121
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2120
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:1125
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2119
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2432
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2389
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2361
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2339
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2317
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2328
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:2651
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:232
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:231
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:250
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:405
    e webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:292
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:405
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:826
    decode webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:456
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:816
    onmessage webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:611
    (Async: EventHandlerNonNull)
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix/priv/static/phoenix.js?:610
    t webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:1104
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:1108
    (Async: EventListener.handleEvent)
    value webpack:////home/jalcerro/ElixirDev/development/epr_umbrella/deps/phoenix_live_view/priv/static/phoenix_live_view.js?:1107
    <anonymous> webpack:///./js/app.js?:22
    <anonymous> webpack:///./js/app.js?:301
    js http://localhost:4000/js/main.js:142
    __webpack_require__ http://localhost:4000/js/main.js:20
    <anonymous> http://localhost:4000/js/main.js:84
    <anonymous> http://localhost:4000/js/main.js:87
2

When does it occur? If it is rendering a liveview, maybe share some of the liveview (& related template) code.

3

Sure, the error occurs when the page loads, this is the code:

defmodule EprWeb.ProviderLive.Index do
  use EprWeb, :live_view

  alias Epr.Partners

  def mount(_params, session, socket) do
    socket =
      socket
      |> assign_current_user_to_socket(session)
      |> assign(page: 1, per_page: 15)
      |> load_providers()

    {:ok, socket, temporary_assigns: [providers: []]}
  end

  def handle_event("load_more", _params, socket) do
    socket =
      socket
      |> update(:page, &(&1 + 1))
      |> load_providers()

    {:noreply, socket}
    
  end
  
  defp load_providers(socket) do
    providers = Partners.get_providers(
      page: socket.assigns.page,
      per_page: socket.assigns.per_page
    )

    assign(socket, :providers, providers)
  end  
end

This is the template for index:

<div class="row flex-xl-nowrap">
  <div id="providers-section"class="col-12 col-md-3">
    <%= live_component(EprWeb.SearchComponent) %>
    <div class="list-providers" phx-update="append">
      <%= for provider <- @providers do %>
        <%= live_component(EprWeb.ProviderComponent, provider: provider) %>
     <div id="footer" phx-hook="InfiniteScroll">
      <div class="loader">
        Loading...
      </div>
    </div>
     <% end %>
    </div>
  </div>
  <div id="selected-provider" class="provider-details col-12 col-md-auto">
    Prueba
  </div>
</div>

This is the component:

defmodule EprWeb.ProviderComponent do
  use EprWeb, :live_component

  @impl true
  def render(assigns) do
    ~L"""
    <div id=<%= @provider.id %> class="provider d-flex">
      <div class="action d-flex flex-column">
        <span>
          <%= link "",
              to: Routes.provider_path(@socket, :show, @provider),
              class: "icon icon-document"
           %>
        </span>
        <span>
          <%= link "",
              to: Routes.provider_path(@socket, :edit, @provider),
              class: "icon icon-edit"
           %>
        </span>
        <span>
          <%= link "",
              to: Routes.provider_path(@socket, :delete, @provider),
              method: :delete,
              data: [confirm: "Are you sure?"],
              class: "icon icon-trash"
           %>
        </span>
      </div>
      <div class="d-flex flex-column">
        <%= content_tag(:div, @provider.rtn) %>
        <%= content_tag(:div, @provider.name) %>
        <%= content_tag(:div, @provider.contact_name) %>
        <%= content_tag(:div, @provider.contact_email) %>
      </div>
    </div>
    """
  end
end
4

I don’t know if it’s related to the issue, but here you seem to be generating many components with the same HTML ID “footer”. Perhaps you only meant to create one.

1 Like
5

@Nicd thanks for your response.

So based on your suggestion, I ended up deleting all the “footer” div element and still get the same error.

I kept digging in the code and finally realized that the parent div does not have a “id” so I added it and worked.

Thanks again for your help.

Best regards,

6

Shoudn’t this
<div id=<%= @provider.id %> class="provider d-flex">
be
<div id="<%= @provider.id %>" class="provider d-flex">
?
Edit: also since element ids need to be globally unique I would suggest something like this prefix
<div id="provider-<%= @provider.id %>" class="provider d-flex">

7

@wanton7 thanks for the comment. I changed it arround and worked the same. In the DOM both ways showed:

<div id="2" class="provider d-flex">
... content
</div>

what I ended up doing was passing the id to the component and LiveView added it to the html element. Like this:

<%= live_component(EprWeb.ProviderComponent, id: provider.id, provider: provider) %>

So I now have:

<div class="provider d-flex" data-phx-component="2" id="phx-FpTJK3753VcknQUi-2-0">
... content
</div>

Works as expected… thanks

8

I thought leex/eex didn’t have any special handling for things like that. I bet browser just read invalid HTML and accepted it. I would still check what kind of HTML was sent by LiveView so it doesn’t cause you problems in other browsers. When HTML aware HEEx templating will be available in future versions of Phoenix I’m quite sure it will give error or warning from that.

1 Like