Elixir_begginer
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
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 5 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
Elixir_begginer
Yes, I actually have. Im such a dumb***. Thank you, thats the solution
codeanpeace
Hmm, those two ids are used in the
<.flash_group .../>component from the defaultcore_components.ex. Have you added that component anywhere else – maybe inDashboardLive?Elixir_begginer
Thank you for the reply. I thought this line fixes the layout problem:
I don’t think i’m rendering it in both liveviews, Maybe I’m doing something wrong.
benwilson512
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.
al2o3cr
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:sidebar-client-erroretc)?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.