Live_redirect produces javascript errors in LiveView

Phoenix Forum Questions / Help
,
1

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

Generated markup using live_redirect:

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

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
  #omitted...
  def render(assigns), do: Phoenix.View.render(ShiritoriWeb.GameView, "index.html", assigns)

Index.html

<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) %>
</section>

GameListLive component

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

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

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
3

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="<%= room.id %>"><%= room.name %></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))}
  end

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

4

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

5

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

6

live navigation is only supported via LiveViews that are live routeable

7

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