Colocated hooks not including hook name

Questions / Help
1

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!

2

Hi!

Same issue here in production. Did you find a solution?

Thanks!

3

No, I just gave up on co-located hooks. Nearly all of my hooks have external dependencies (they’re importing other JS libraries) and I couldn’t find a clean way to do that. I’m hoping a future evolution of co-located hooks improves on this.

4

Hi,

Same issue. I’m using co-located hook within a LC but no way to get it work, yet I can see it the _build dir. I’m on phoenix_live_view 1.1.3 and phoenix 1.8.0.

5

You need to ensure that:

  1. You’re importing the colocated hooks in your app.js
import {hooks as colocatedHooks} from "phoenix-colocated/dayzee"
  1. When you’re building for production `mix compile` needs to run before `mix assets.deploy`

Try to read the `20_stqqlse4fjjmkwaxmhvwqdkgdu.js` file you’ve shown in your output. You should see the hook name in that file.

1 Like