Phoenix LiveView Error: no route found for POST

Question

I've got a problem with a live-view form, that apparently sends post requests to the router instead of using the socket connection on submit so i'm getting "no route found for POST /stationen/new (SportfestWeb.Router)"

I checked the fixes from this post: Phoenix LiveView form_for raising NoRouteError at POST But since i used mix phx.new with --live flag i didn't find any missing code here. I barely changed anything from the mix generator, which is irritating for me. I guess these are the relevant parts of the code (my project is called "sportfest"): in the /lib/sportfest_web file these functions are included:

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {SportfestWeb.LayoutView, "live.html"}

      unquote(view_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent

      unquote(view_helpers())
    end
  end

and are used in the /lib/sportfest_web/live/station_live/index.ex and /lib/sportfest_web/live/station_live/form_component.ex:

defmodule SportfestWeb.StationLive.FormComponent do
  use SportfestWeb, :live_component

  alias Sportfest.Vorbereitung
  alias Sportfest.Vorbereitung.Station

  def mount(_params, _session, socket) do
    {:ok, assign(socket, %{changeset: Vorbereitung.change_station(%Station{})})}
  end

  @impl true
  def update(%{station: station} = assigns, socket) do
    changeset = Vorbereitung.change_station(station)

    {:ok,
     socket
     |> assign(assigns)
     |> assign(:changeset, changeset)}
  end

  @impl true
  def handle_event("validate", %{"station" => station_params}, socket) do
    changeset =
      socket.assigns.station
      |> Vorbereitung.change_station(station_params)
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, :changeset, changeset)}
  end

  def handle_event("save", %{"station" => station_params}, socket) do
    save_station(socket, socket.assigns.action, station_params)
  end

  defp save_station(socket, :edit, station_params) do
    case Vorbereitung.update_station(socket.assigns.station, station_params) do
      {:ok, _station} ->
        {:noreply,
         socket
         |> put_flash(:info, "Station updated successfully")
         |> push_redirect(to: socket.assigns.return_to)}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, :changeset, changeset)}
    end
  end

  defp save_station(socket, :new, station_params) do
    case Vorbereitung.create_station(station_params) do
      {:ok, _station} ->
        {:noreply,
         socket
         |> put_flash(:info, "Station created successfully")
         |> push_redirect(to: socket.assigns.return_to)}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end
end

The template of the form sending the submission is /lib/sportfest_web/live/station_live/form_component.html.heex:

<div>
  <h2><%= @title %></h2>

  <.form
    let={f}
    for={@changeset}
    id="station-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save">

    <%= label f, :name %>
    <%= text_input f, :name %>
    <%= error_tag f, :name %>

    <%= label f, :max_punkte %>
    <%= text_input f, :max_punkte %>
    <%= error_tag f, :max_punkte %>

    <div>
      <%= submit "Save", phx_disable_with: "Saving..." %>
    </div>
  </.form>
</div>

Do you have any ideas where to look for the cause of this error? Let me know which parts of the code could help you/us to figure it out and i'll edit this question. Thanks in advance for your help.

Answer 1

You might want to delete the node_modules and do a re-install of the packages required.

rm -rf node_modules
npm install