Can't get the Phoenix.LiveComponent example to work

I'm following the official documentation on how to build a LiveComponent.

I get this error which I don't understand why: I get this error when I load /cameras:

[error] GenServer #PID<0.864.0> terminating
** (UndefinedFunctionError) function MyAppWeb.HeroComponent.__live__/0 is undefined (module MyAppWeb.HeroComponent is not available)

I've created lib/my_app_web/components/hero.exs

defmodule MyAppWeb.HeroComponent do
  use MyAppWeb, :live_component

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <div class="hero"><%= @content %></div>
    """
  end

In lib/my_app_web/live/camera_live/index.ex I add an alias:

defmodule MyAppWeb.CameraLive.Index do
  use MyAppWeb, :live_view

  alias MyApp.Cameras
  alias MyApp.Cameras.Camera
  alias MyAppWeb.HeroComponent # Added this

And I updated camera_live/index.html.heex by adding this line:

  <.live_component module={HeroComponent} id="hero" content={"random data"} />

The routes:

mix phx.routes | ack cameras
  GET   /cameras                                    MyAppWeb.CameraLive.Index :index

I'm using Phoenix 1.7.11 and Phoenix LiveView 0.20.2

I had mistakenly named the LiveComponent hero.exs, when it should have been .ex.