Solving 'cannot redirect socket on update/2' with Phoenix Live view components

Maybe you’ve encountered this cannot redirect socket on update/2 error while using a live_component and a put_redirect on Phoenix live view:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[error] GenServer #PID<0.1068.0> terminating
** (RuntimeError) cannot redirect socket on update/2
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/utils.ex:413: Phoenix.LiveView.Utils.maybe_call_update!/3
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/diff.ex:324: Phoenix.LiveView.Diff.component_to_rendered/4
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/diff.ex:366: Phoenix.LiveView.Diff.traverse/6
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/diff.ex:427: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/6
    (elixir 1.11.2) lib/enum.ex:2181: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/diff.ex:339: Phoenix.LiveView.Diff.traverse/6
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/diff.ex:580: Phoenix.LiveView.Diff.render_component/9
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/diff.ex:194: Phoenix.LiveView.Diff.write_component/5
    (phoenix_live_view 0.15.0) lib/phoenix_live_view/channel.ex:463: Phoenix.LiveView.Channel.component_handle_event/6
    (stdlib 3.13.2) gen_server.erl:680: :gen_server.try_dispatch/4
    (stdlib 3.13.2) gen_server.erl:756: :gen_server.handle_msg/6
    (stdlib 3.13.2) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

This is actually easy to solve, your component just needs to have an id:

1
<%= live_component @socket, MyApp.MyComponent, id: "something" %>

The reason being that stateful components needs to have an id for the lifecycle function to do its job properly. Now you are done!

Up Next

A hook for handling very large lists with Phoenix Live View

Automating Play Store screenshots in Flutter

From a raw screenshot to the Play Store


Looking for More?

More tech articles are coming soon!