I’m trying to move to colocated hooks following the LiveView 1.1 Changelog.

I think I made all the necessary changes, but when my colocated hooks compile, they’re named simply ModuleName. The hook name is nowhere to be seen. Did I miss a crucial step of the migration, or is there something else I’m doing wrong?

Example hook:

defmodule IdoWeb.EmojiComponents do
  use Phoenix.Component

  alias Phoenix.LiveView.ColocatedHook

  def input(assigns) do
    ~H"""
    <span>
      <input
        id={@id}
        phx-hook=".EmojiInput"
      />
      <script :type={ColocatedHook} name=".EmojiInput">
        import { createPopup } from "@picmo/popup-picker";
        export default {
          mounted() {
          const input = this.el;

          const picker = createPopup(
          //...

Console error:

unknown hook found for “IdoWeb.EmojiComponents.EmojiInput”

Build directory:

_build/dev/phoenix-colocated/ido
├── IdoWeb.EmojiComponents
│   └── 20_stqqlse4fjjmkwaxmhvwqdkgdu.js

Thanks!