Live_redirect produces javascript errors in LiveView

I encounter an error when using live_redirect function but the html markup seems fine.

Generated markup using live_redirect:

   <a data-phx-link="redirect" data-phx-link-state="push" href="/game/GjfXq-DYIaMFN-PpJNr2" to="/game/GjfXq-DYIaMFN-PpJNr2">Random Game</a>

But when I click that link the following error logs in the browser console.

phoenix_live_view.js:568 Uncaught TypeError: Cannot read property 'el' of null
    at e.value (phoenix_live_view.js:568)
    at e.value (phoenix_live_view.js:861)
    at eval (phoenix_live_view.js:836)

The view where I use the live_redirect is being rendered by a parent LiveView.

#Parent LiveView
defmodule ShiritoriWeb.HomeLive do
  use Phoenix.LiveView
  def render(assigns), do: Phoenix.View.render(ShiritoriWeb.GameView, "index.html", assigns)


<section class="section">
    <button class="button is-success " phx-click="open_modal">Create new game</button>
    <%= render "create_game_modal.html", assigns %>
    <%= live_component(@socket, ShiritoriWeb.GameListLive, rooms: @rooms) %>

GameListLive component

defmodule ShiritoriWeb.GameListLive do
  use Phoenix.LiveComponent
  alias ShiritoriWeb.Router.Helpers, as: Routes

  def render(assigns) do
    <%= for room <- @rooms do %>
    <div class="box">
     <article class="media">
        <div class="media-content">
            <div class="content">
            <span><%= live_redirect, to: Routes.live_path(@socket, ShiritoriWeb.GameLive, %></span>
    <% end %>

The docs mention that you can’t use live_redirect inside a component.

Live links and live redirects

A template rendered inside a component can use live_link calls. The live_link is always handled by the parent LiveView , as components do not provide handle_params . live_redirect from inside a component is not currently supported. For such, you must send a message to the LiveView itself, as mentioned above, which may then redirect.

1 Like

Hi, I follow the docs wherein the button inside my live component will send a message that will be handled by the LiveView parent but still I got a javascript error.

Uncaught TypeError: Cannot read property 'el' of null
    at e.value (phoenix_live_view.js:568)
    at e.value (phoenix_live_view.js:861)
    at e.value (phoenix_live_view.js:1540)
    at Object.eval [as callback] (phoenix_live_view.js:1610)
    at eval (phoenix.js:229)
    at Array.forEach (<anonymous>)
    at e.value (phoenix.js:228)
    at Object.eval [as callback] (phoenix.js:247)
    at e.value (phoenix.js:406)
    at Object.eval [as callback] (phoenix.js:289)

The live component:

<%= for room <- @rooms do %>
    <div class="box">
     <button class="button" phx-click="send_redirect" phx-value-id="<%= %>"><%= %></button>
<% end %>

Then it was handled the parent Live View.

 def handle_event("send_redirect", %{"id" => id} = _params, socket) do
    IO.inspect(Routes.live_path(socket, ShiritoriWeb.GameLive, id))

    {:noreply, push_redirect(socket, to: Routes.live_path(socket, ShiritoriWeb.GameLive, id))}

I got an error when I try using live_redirect function so I use push_redirect to mount another LiveView.

Is your parent Live View defined at the router level with the live macro?

I’m afraid its not defined in the router.ex. The page view was rendered through a controller.

live navigation is only supported via LiveViews that are live routeable

Thank you for the answer. That explains why it doesn’t work.