I am trying to use Alpine JS (3.13.2) with Phoenix 1.7.10, using dead views generated by mix phx.gen.html

In a file such as my_app/lib/my_app_web/controllers/example_html/index.html.heex, I can use x- attributes from Alpine, such as x-data on non-CoreComponents such as <button> or <div>, but cannot use them on CoreComponents such as <.icon>.

When writing <.icon name="hero-heart" x-init={~s(console.log("I am being initialized"\))} /> I receive a compilation warning:

warning: undefined attribute "x-init" for component MyAppWeb.CoreComponents.icon/1
  lib/my_app_web/controllers/example_html/index.html.heex:5: (file)

I have modified the following lines:

• in lib/my_app_web/components/core_components.ex

  - use Phoenix.Component
  + use Phoenix.Component, global_prefixes: ["x-"]
  

• in lib/my_app_web.ex

  def live_view do
     quote do
       use Phoenix.LiveView, 
         ...
         + global_prefixes: ["x-"]
        ...
     end
  end
  ...
  def live_component do
     quote do
       - use Phoenix.LiveComponent
       + use Phoenix.LiveComponent, global_prefixes: ["x-"]
     end
  end
  ...
  def html do
    quote do
      - use Phoenix.Component
      + use Phoenix.Component, global_prefixes: ["x-"]
      ...
    end
  end
  

I saw a closed issue on the Phoenix repo that states that global_prefixes must be set in the caller – but I’m not sure where I would add that in my lib/my_app_web/controllers/example_html.ex file which looks like this:

defmodule MyAppWeb.ExampleHTML do
  use MyAppWeb, :html

  alias MyApp.Examples.Example

  embed_templates "example_html/*"

  @doc """
  Renders a example form.
  """
  attr :changeset, Ecto.Changeset, required: true
  attr :action, :string, required: true

  def example_form(assigns)
end

Any help would be appreciated!