Nested Liveview: duplicate id error

Phoenix Forum Questions / Help
, ,
1

Hello,

can anyone help me out with a problem I’m unable to solve by googling and searching through the forum.

I’m using a nested liveview for my navbar and sidebar so the layout html, which is the entrance point of the nested view, looks like this:

<%= live_render(@socket, HelloWeb.DashboardLive,
  id: "dashboard_shell",
  sticky: true
) %>

<main class="mx-auto max-h-screen overflow-auto px-2 pt-11 pb-16 lg:px-6 2xl:ml-56">
  <%= @inner_content %>
  <.flash_group flash={@flash} />
</main>

With the mount function in the dashboard_live.ex looking like this:

  def mount(_params, _session, socket) do
    {:ok, socket, layout: false}
  end

This creates two liveviews, which I want, however, when loading the page on the client side, I get this console error:

Multiple IDs detected: client-error. Ensure unique element ids.

Upon searching for the multiple ids, it looks like that both liveviews create a div with id="client-error" and a div with id="server-error", so I have this duplicate divs in both views with the same id.

Does anyone know how I can fix this?

EDIT: Maybe I should ignore this error?

Thank you

2

Presumably each of them use those divs to display errors - the fix is going to depend on how the UI is supposed to work when both LiveViews want to display errors. The high-level options are:

  • the views want to use the same UI element to display errors. Maybe it should bubble up into the dashboard shell?
  • the views want to use separate UI elements. Maybe prefix the IDs (sidebar-client-error etc)?

This will cause weird behavior whenever Javascript tries to target the element by ID. IIRC duplicate IDs can also confuse the MorphDOM machinery that LiveView uses behind the scenes.

3

You don’t want to render the layout on both live views. The inner one should not use a layout or you will duplicate assets as well as flash messages and other mark up.

4

Thank you for the reply. I thought this line fixes the layout problem:

def mount(_params, _session, socket) do
    {:ok, socket, layout: false}
  end

I don’t think i’m rendering it in both liveviews, Maybe I’m doing something wrong.

5

Hmm, those two ids are used in the <.flash_group .../> component from the default core_components.ex. Have you added that component anywhere else – maybe in DashboardLive?

1 Like
6

Yes, I actually have. Im such a dumb***. Thank you, thats the solution