** (UndefinedFunctionError) function Phoenix.LiveView.Flash.init/1 is undefined (module Phoenix.LiveView.Flash is not available)

[david234]

I am new to Phoenix Live View.

router.ex

  import Phoenix.LiveView.Router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug Phoenix.LiveView.Flash

mix.exs

  defp deps do
    [
      {:phoenix, "~> 1.4.15"},
      {:phoenix_pubsub, "~> 1.1"},
      {:phoenix_ecto, "~> 4.0"},
      {:ecto_sql, "~> 3.1"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 2.11"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:gettext, "~> 0.11"},
      {:jason, "~> 1.0"},
      {:plug_cowboy, "~> 2.0"},
      {:phoenix_live_view, "~> 0.9.0"}

web.ex

  def controller do
    quote do
      use Phoenix.Controller, namespace: ReactorWeb

      import Plug.Conn
      import ReactorWeb.Gettext
      import Phoenix.LiveView.Controller

      alias ReactorWeb.Router.Helpers, as: Routes
    end
  end

  def view do
    quote do
      use Phoenix.View,
        root: "lib/reactor_web/templates",
        namespace: ReactorWeb

      # Import convenience functions from controllers
      import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]

      # Use all HTML functionality (forms, tags, etc)
      use Phoenix.HTML

      import ReactorWeb.ErrorHelpers
      import ReactorWeb.Gettext

      import Phoenix.LiveView.Helpers

      alias ReactorWeb.Router.Helpers, as: Routes
    end
  end

  def router do
    quote do
      use Phoenix.Router
      import Plug.Conn
      import Phoenix.Controller
      import Phoenix.LiveView.Router

    end
  end

endpoint.ex

socket "/live", Phoenix.LiveView.Socket

package.json

  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  },

app.js

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
liveSocket.connect()

app.css

@import "../../deps/phoenix_live_view/assets/css/live_view.css";

defmodule ReactorWeb.FooLive do
  use Phoenix.LiveView

  def mount(_session, socket) do
    {:ok, assign(socket, msg: "none")}
  end

  def render(assigns) do
    ~L"""
    <h1>Hello Gron!</h1>
    <div phx-keydown="keydown" phx-target="window">
    <%= @msg %>
    </div>
    """
  end

  def handle_event("keydown", %{"key" => key}, socket) do
    {:noreply, assign(socket, msg: key)}
  end
end

I am getting the below error

Can anyone help me to solve this. Your help is greatly appreciated.

[kokolegorille]

I am not sure about your router… You should have

    plug :fetch_live_flash

# Instead of

    plug :fetch_flash
    plug Phoenix.LiveView.Flash

[david234]

@kokolegorille

plug :fetch_live_flash

I replaced this now that error is gone

now router.ex

defmodule ReactorWeb.Router do
  use ReactorWeb, :router

  import Phoenix.LiveView.Router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :fetch_live_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

I tried this setup

Elixir learning: Simple Phoenix LiveView App: Setup

I have done the complete setup. End of this example. When some key is pressed that will be updated in brower. But mine not changing anything. I am not sure whether my phoenix live view setup is working or not. How to check whether the phoenix Live setup is working or not . Any help?

defmodule ReactorWeb.FooLive do
  use Phoenix.LiveView

  def mount(_session, socket) do
    {:ok, assign(socket, msg: "none")}
  end

  def render(assigns) do
    ~L"""
    <h1>Hello Gron!</h1>
    <div phx-keydown="keydown" phx-target="window">
    <%= @msg %>
    </div>
    """
  end

  def handle_event("keydown", %{"key" => key}, socket) do
    {:noreply, assign(socket, msg: key)}
  end
end

[kokolegorille]

If You still follow this tutorial… it will be updated to 0.7, then 0.8. But we are using 0.10 now. Keydown events have changed since then.

You should read the CHANGELOG.

[david234]

Thanks

I changed

<div phx-keydown="keydown" phx-target="window">
to
<div phx-window-keydown="keydown">

This works for version

{:phoenix_live_view, “~> 0.8.0”}

[lc0815]

this does not compile:

== Compilation error in file lib/breakoutex_web/router.ex ==
** (CompileError) lib/breakoutex_web/router.ex: undefined function phoenix_live_flash/2
    (elixir 1.11.0) src/elixir_locals.erl:114: anonymous fn/3 in :elixir_locals.ensure_no_undefined_local/3
    (stdlib 3.13.2) erl_eval.erl:680: :erl_eval.do_apply/6
    (elixir 1.11.0) lib/kernel/parallel_compiler.ex:314: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7

and the router code:

  pipeline :browser do
    plug(:accepts, ["html"])
    plug(:fetch_session)
    # plug(:fetch_flash)
    plug(:phoenix_live_flash)
    # plug(Phoenix.LiveView.Flash)
    plug(:protect_from_forgery)
    plug(:put_secure_browser_headers)
  end

and using version 0.15 mix.exs

      {:phoenix_live_view, "~> 0.15.0"}

[AlchemistCamp]

LiveView had many breaking changes between versions 0.5 and 0.15.

If you’re working through a tutorial, it’s best to use the exact same library versions the tutorial does and then use the upgrade guides in the library’s changelog to get to the current version after you’ve finished the tutorial. At that point, you’ll have more context and it will much easier for you.

LiveView is a moving target and even in the course of that series, I had to do a lot of upgrade episodes. This is why I haven’t released anything new on LiveView in the past year. Video can’t be updated and they go out of date quickly (unlike Elixir itself or Ecto which are very stable). Even Phoenix hasn’t broken too much in the past few years.

LiveView is a different story, though! In general, I think you’ll find more up to date info in text sources, like the official guides and the Pragprog book, Programming Phoenix LiveView.