ArgumentError when using live component * 1st argument: not an atom

Questions / Help
, , ,
1

I have been trying to render a live component, like this as in the docs:

  <h1>Home</h1>
  <p>Welcome to the home page</p>

  <.live_component module={CellitWeb.HomeHeroComponent} id="home" />

</div>```

I keep on getting this error however:
```** (exit) an exception was raised:
    ** (ArgumentError) errors were found at the given arguments:

  * 1st argument: not an atom

         :erlang.apply(%{__changed__: nil, id: "home", module: CellitWeb.HomeHeroComponent}, :__live__, [])```

Whenever I remove this line:
```  <.live_component module={CellitWeb.HomeHeroComponent} id="home" />

the error is no more, I am not sure why the error is there and I’d like some help and insight on this.

2

It sounds like an issue in how you’ve defined that LiveComponent. Can you share the code for it?

3

Here is the LiveComponent definition, very bare bones as I was just beginning the project

  use CellitWeb, :live_component

  def render(assigns) do
    ~H"""
    <div class="bg-primary w-[100%] h-[100vh]">
      Heroo
      <div class="text-lg">
        <%= if @current_user == nil do%>
          No User yet
        <% else %>
          <%= @current_user.first_name %>
        <% end %>
      </div>
    </div>
    """
  end
end
4

Thank you for your response, I have however found after countless of hours of debugging that the problem lies in how I define and render with my Phoenix Liveview version 0.16.0 and how I should define the live component using
use Phoenix.Component and render it as <%= live_component HeroComponent, id: :hero, content: @content %>.