Phoenix LiveView 0.18 and live_flash

This live.html.heex file has been generated by mix itself a while ago and hasn’t been touched since, although very useful

<main>
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>

  <p class="alert alert-danger" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="error"><%= live_flash(@flash, :error) %></p>

  <%= @inner_content %>
</main>

Now that our app is being upgraded to LiveView 0.18, it gets compilation errors

== Compilation error in file lib/app_web/views/layout_view.ex ==
** (CompileError) lib/app_web/templates/layout/live.html.heex:4: undefined function live_flash/2 (expected AppWeb.LayoutView to define such a function or for it to be imported, but none are available)

I’ve been searching all over to understand what’s going on and can’t find out why… Actually, the only way to fix this for now is to comment them flashes.

9 Likes

LiveView modules are reorganised in 0.18. live_flash is now inside Phoenix.Component. You have to adjust imports inside view_helpers function in your_project_web.ex file

Those new components live in the Phoenix.Component module. Phoenix.LiveView.Helpers itself has been soft deprecated and all relevant functionality has been migrated. You must import Phoenix.Component where you previously imported Phoenix.LiveView.Helpers when upgrading. You may also need to import Phoenix.Component where you also imported Phoenix.LiveView and some of its functions have been moved to Phoenix.Component.
Additionally, the special let attribute on function components have been deprecated by a :let usage.

You can read more about it in release notes - phoenix_live_view/CHANGELOG.md at main · phoenixframework/phoenix_live_view · GitHub

5 Likes

It has been moved from Phoenix.LiveView.Helpers to Phoenix.Component, as mentioned in the changelog.

Replacing import Phoenix.LiveView.Helpers by import Phoenix.Component should fix it.

11 Likes

Fixes my live_flash problem, thank you very much!

Seems like I can’t remove import Phoenix.LiveView.Helpers though, as it generates this error

== Compilation error in file lib/app_web/views/layout_view.ex ==
** (CompileError) lib/app_web/templates/layout/root.html.heex:8: undefined function live_title_tag/2 (expected AppWeb.LayoutView to define such a function or for it to be imported, but none are available)

this is about this line

<%= live_title_tag assigns[:page_title] || "App", suffix: "" %>

Should I keep both or is this live_title_tag replaced by something else that’s not in Phoenix.LiveView.Helpers?

2 Likes

Use the new <.live_title> component :slight_smile:

https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#live_title/1

14 Likes

Working perfectly, thanks guys!

Love this community…

3 Likes