LiveView Upgrade Issue: undefined function live_component/2

Phoenix Forum Questions / Help
1

I am getting this error in my LiveHelpers file: “undefined function live_component/2” because live_component USED to take 2 arguments and now it only takes 1.

The new Phoenix.Component defines live_component with 1 argument as:

  def live_component(assigns)

live_component is being used in MyAppWeb.LiveHelpers as shown below. I didn’t write this code. This was auto-generated when I first started using LiveView 3 years ago. And it’s now breaking with this update.

def live_modal(component, opts) do
    path = Keyword.fetch!(opts, :return_to)
    modal_opts = [id: :modal, return_to: path, component: component, opts: opts]
    live_component(MyAppWeb.ModalComponent, modal_opts)
  end

MyAppWeb.LiveHelpers used to import Phoenix.LiveView.Helpers:

 @doc deprecated: "Use .live_component (live_component/1) instead"
  defmacro live_component(component, assigns, do_block \\ []) do
    if is_assign?(:socket, component) do
      IO.warn(
        "passing the @socket to live_component is no longer necessary, " <>
          "please remove the socket argument",
        Macro.Env.stacktrace(__CALLER__)
      )
    end
...

I’m confused. live_component used to take 2 arguments and now it only takes 1. How am I supposed to make old versions of the live_component function work with only 1 argument??? Do I just put all of the arguments into assigns?

1 Like
2

The modal component has changed, try something like this…

<.modal :if={@live_action in [:new, :edit]} id="post-modal" 
  show on_cancel={JS.patch(~p"/posts")}>
  <.live_component
    module={KokoWeb.PostLive.FormComponent}
    id={@post.id || :new}
    title={@page_title}
    action={@live_action}
    post={@post}
    patch={~p"/posts"}
  />
</.modal>

BTW It is now defined in any_web/components/core_components.ex

3

Thank you @kokolegorille !

I don’t have a core_components.ex file. i don’t have a myAppWeb/Components folder either. Was that supposed to be automatically added when I upgraded?

Is live_modal not being used anymore?

4

Ohhhh … was that all added with Phoenix 1.7?

I’m following the instructions from @chrismccord that said to first upgrade Phoenix LiveView before upgrading to Phoenix 1.7. Should I try to upgrade to Phoenix 1.7 even though my Phoenix LiveView is totally broken?

5

Yes, the structure has changed quite a lot, but You don’t need to care because Elixir is capable to load any module from anywhere (in the lib folder)

But You need a core_components.ex, where You put it is not really important.

If You want to keep your structure, it’s fine… add it in the live folder.

Then check how it is loaded (in lib/app_web.ex) from a new project You have created from Phoenix.

Also…what assets pipeline and what css framework do You use?

The new Phoenix is using ESbuild and Tailwind, but You can use your own bundler and write your own core_components.ex for the css framework of your choice.

1 Like
6

I haven’t generated a new Phoenix project yet, because I haven’t gotten to the point where I can upgrade to Phoenix 1.7. I feel like I’m in a chicken-egg situation. It’s asking for files that must get loaded with Phoenix 1.7, but @chrismccord said to not upgrade to 1.7 until after upgrading to Phoenix LiveView 0.18.

Are there instructions anywhere for beginners like me to follow? This upgrade is seriously confusing. Even if I add core_components, its still going to be complaining about my live_component function because it is expecting 1 argument and I’m passing 2 arguments in all of my existing code.

I have been using Tailwinds so hopefully there are no big changes that will affect my CSS code. I don’t know what my assets pipeline is. Is that something I’d find in my mix file?

7

Not sure that I understand. Upgrading to Phoenix 1.7 means charging the new archive. It does not change your project, just the phx mix’s tasks. It is always possible to return to previous version of the installer.

With the new installer, You can create a new Phoenix 1.7 project. It still won’t touch your previous project.

Then revert to previous installer, while working on your Phoenix 1.6 version.

You need to update to the example I gave for a new modal. This part belongs to liveview.

Yes, it should be fine…

I understand it can be painful to upgrade. To be sure, I try on a dummy project first.

8

I’m going to update my deps to include phoenix 1.7. I was trying to get it to build without complilation errors before I moved over to 1.7, but I think phoenix live view 0.18 is not going to work until I move to phoenix 1.7.

Where did you get the core_components file? Was that auto generated for you?

When you say that I need to update to the example you gave me … do you mean that I need to put that code in my core_components file? Or do you mean that all of my components will need to look like that one?

9

Yes, but the file is serving as an example, and is compatible with markup from generators.
I rewrote it for Bootstrap 5, because it is the CSS framework used at my work.

The code is from an html.heex file, it’s not code loaded as in your example (in a function)

10

Hmm, just thinking out loud but maybe try using function arity to make it work with something like this?

  def live_component(component, assigns) do
    Phoenix.Component.live_component(Map.put(assigns, :module, component))
  end

Yes, Phoenix apps created using more recent generators include a core_components.ex file.

1 Like
11

Ugh … I’m seriously so lost. I tried to get phoenix 1.7 and now I’m getting these errors which make no sense since my mix.exs file shows all of those as being up to date.

Failed to use "ecto" (versions 3.9.0 to 3.10.1) because
  ecto_sql (version 3.8.3) requires ~> 3.8.4 (RED)
  phoenix_ecto (version 4.4.0) requires ~> 3.3
  phoenix_live_dashboard (version 0.7.2) requires ~> 3.6.2 or ~> 3.7


Failed to use "ecto" (versions 3.9.0 to 3.10.1) because
  ecto_sql (version 3.8.3) requires ~> 3.8.4 (RED)
  phoenix_ecto (version 4.4.1) requires ~> 3.5
  phoenix_live_dashboard (version 0.7.2) requires ~> 3.6.2 or ~> 3.7


Failed to use "phoenix" (versions 1.7.0 to 1.7.2) because
  live_select (versions 0.4.0 and 0.4.1) requires ~> 1.6.0 (RED)
  phoenix_live_reload (version 1.3.3) requires ~> 1.4
  phoenix_live_view (version 0.18.18) requires ~> 1.6.15 or ~> 1.7.0
  mix.exs specifies ~> 1.7.0


Failed to use "telemetry" (versions 1.0.0 to 1.2.1) because
  ecto_sql (version 3.8.3) requires ~> 0.4.0 or ~> 1.0
  phoenix (versions 1.7.0 to 1.7.2) requires ~> 0.4 or ~> 1.0
  phoenix_live_view (version 0.18.18) requires ~> 0.4.2 or ~> 1.0
  telemetry_metrics (version 0.6.0) requires ~> 0.4 (RED)


Failed to use "telemetry" (versions 1.0.0 to 1.2.1) because
  ecto_sql (version 3.8.3) requires ~> 0.4.0 or ~> 1.0
  phoenix (versions 1.7.0 to 1.7.2) requires ~> 0.4 or ~> 1.0
  phoenix_live_view (version 0.18.18) requires ~> 0.4.2 or ~> 1.0
  telemetry_metrics (version 0.6.1) requires ~> 0.4 or ~> 1.0
  telemetry_poller (versions 0.5.0 and 0.5.1) requires ~> 0.4 (RED)

My mix:

defp deps do
    [
      {:bcrypt_elixir, "~> 2.0"},
      {:phoenix, "~> 1.7.0"},
      {:phoenix_html, "~> 3.0"},
      {:phoenix_view, "~> 2.0"},
      {:phoenix_live_view, "~> 0.18.18"},
      {:phoenix_live_reload, "~> 1.3.3", only: :dev},
      {:phoenix_live_dashboard, "~> 0.7.2"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.8.3"},
      {:postgrex, ">= 0.0.0"},
      {:floki, ">= 0.27.0"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 0.5"},
      {:esbuild, "~> 0.3", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.1", only: :dev},
      {:jason, "~> 1.2"},
      {:plug_cowboy, "~> 2.5"},
      {:nimble_csv, "~> 1.1.0"},
      {:geo, "~> 3.4"},
      {:live_select, "~> 0.4.0"},
      {:poison, "~> 4.0"},
      {:geo_postgis, "~> 3.4"},
      {:faker, "~> 0.17", only: :dev},
      {:hackney, "~> 1.9"},
      {:kday, "~> 1.0"},
      {:tzdata, "~> 1.1"},
      {:tz_datetime, "~>0.1.3"},
      {:timex, "~> 3.7.7"},
      {:swoosh, "~> 1.6"},
      {:premailex, "~> 0.3.0"},
      {:phoenix_swoosh, "~> 1.0"},
      {:oban, "~> 2.13"}
    ]
  end
12

What is the output of?

mix hex.outdated
13 
Unchecked dependencies for environment dev:
* phoenix (Hex package)
  the dependency does not match the requirement "~> 1.7.0", got "1.6.16"
** (Mix) Can't continue due to errors on dependencies
14

Please revert to 1.6 first…

15 
bcrypt_elixir           2.3.1    3.0.1    Update not possible  
ecto_sql                3.8.3    3.10.1   Update not possible  
esbuild                 0.7.0    0.7.0    Up-to-date           
faker                   0.17.0   0.17.0   Up-to-date           
floki                   0.34.2   0.34.2   Up-to-date           
geo                     3.4.3    3.4.3    Up-to-date           
geo_postgis             3.4.2    3.4.2    Up-to-date           
hackney                 1.18.1   1.18.1   Up-to-date           
jason                   1.4.0    1.4.0    Up-to-date           
kday                    1.0.1    1.0.1    Up-to-date           
live_select             0.4.1    1.0.3    Update not possible  
nimble_csv              1.1.0    1.2.0    Update not possible  
oban                    2.15.1   2.15.1   Up-to-date           
phoenix                 1.6.16   1.7.2    Update not possible  
phoenix_ecto            4.4.1    4.4.1    Up-to-date           
phoenix_html            3.3.1    3.3.1    Up-to-date           
phoenix_live_dashboard  0.7.2    0.7.2    Up-to-date           
phoenix_live_reload     1.3.3    1.4.1    Update not possible  
phoenix_live_view       0.18.18  0.18.18  Up-to-date           
phoenix_swoosh          1.2.0    1.2.0    Up-to-date           
phoenix_view            2.0.2    2.0.2    Up-to-date           
plug_cowboy             2.6.1    2.6.1    Up-to-date           
poison                  4.0.1    5.0.0    Update not possible  
postgrex                0.16.5   0.17.1   Update not possible  
premailex               0.3.18   0.3.18   Up-to-date           
swoosh                  1.10.3   1.10.3   Up-to-date           
tailwind                0.2.0    0.2.0    Up-to-date           
telemetry_metrics       0.6.1    0.6.1    Up-to-date           
telemetry_poller        0.5.1    1.0.0    Update not possible  
timex                   3.7.11   3.7.11   Up-to-date           
tz_datetime             0.1.3    0.1.3    Up-to-date           
tzdata                  1.1.1    1.1.1    Up-to-date
16

You can backup your project, and try to update the versions… even the not possible.

You might need to remove _build before recompiling, and running your test suite.

Writing tests is peace of mind when You upgrade :slight_smile:

17

I wonder if I should just start over altogether. I haven’t checked in anything because it was all broken. Perhaps I should revert back to my last stable build on git which was on Phoenix 1.6 and Phoenix LiveView 0.17 and then start this process again.

When you say that I shoudl update versions … do you mean the ones that say “Update not possible?”

18

yes, also the not possible

19

Why is it saying “not possible”? What would cause it to not allow updates. I will need to know what is blocking it from updating so that I can change whatever is in its way.

20

I am reading this post where you provided a bunch of help to someone having deps issues.

Interesting … I’m using vscode. OK … I’ll try removing _build and see if that helps.

I wonder if upgrading to Phoenix 1.7 will then allow those “updates” to happen.

If I roll backward and start over, should I just update Phoenix at the same time as Phoenix LiveView and then do mix deps.update --all?