Trying to make my function components available everywhere, getting an error `module_info/1` is undefined?

Questions / Help
, ,
1

I’m trying to get my function components available in all of my views. My shared components are in there own files under /live/components/_shared. And I have one shared.ex file available under /live/components/shared.ex. I don’t know enough about macros in elixir yet.

This is what it looks like:

defmodule HydroplaneWeb.Components.Shared do
  alias HydroplaneWeb.Components.Shared

  defmacro __using__(_opts) do
    quote do
      import Shared.{Button, Card, Dropdown, Lists, Modal}
    end
  end
end

But when I use it from my view_helpers() it is giving me the error Shared.Button.module_info/1 is undefined (function not available).

  defp view_helpers do
    quote do
      # ..................

      use HydroplaneWeb.Components.Shared
    end
  end

I have tried a few different configurations but just know I’m missing something basic. How can I get this working so that all of my function components are available in my liveview templates? Also what key concept am I misunderstand so I can avoid the same mistake in the future?

2

The alias HydroplaneWeb.Components.Shared you have at the top of the file is not in the same scope as your import Shared line. You can see this in the error message in that it is Shared.Button.module_info/1 not HydroplaneWeb.Components.Shared.module_info/1.

You should either make the import fully qualified eg import HydroplaneWeb.Components.Shared.{Button, Card, Dropdown, Lists, Modal} or add the alias inside the quote. I’d recommend just making it fully qualified so you don’t inject an alias into the other module.

3 Likes
3

I tried getting rid of the alias and making the module fully qualified inside of __using__/1 but I’m getting the same error. I also tried putting the import HydroplaneWeb.Components.Shared.{Button, Card, Dropdown, Lists, Modal} directly inside of the quote block in view_helpers.

4

Can you show how you are calling these components?

5

My guess is that you might have a typo somewhere in your

defmodule HydroplaneWeb.Components.Shared.Button do
…
6

There’s no typo, and it happens with more than just the Button module. If I change it to include the individual modules it happens with all of them.

7

Of course, I’m trying to call them like this as function components:

image
image2024×210 47.3 KB

8

Is the error you get a runtime or compile time error? Is there a stack trace or more information you can provide?

What is the exact error you get if you do

  defp view_helpers do
    quote do
      # ..................

      import HydroplaneWeb.Components.Shared.{Button, Card, Dropdown, Lists, Modal}
    end
  end
9

When I try to start the server I get this:

Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit] [dtrace]

==> hydroplane_web
Compiling 27 files (.ex)

== Compilation error in file lib/hydroplane_web/live/components/_shared/button.ex ==
** (UndefinedFunctionError) function HydroplaneWeb.Components.Shared.Button.module_info/1 is undefined (function not available)
    HydroplaneWeb.Components.Shared.Button.module_info(:exports)
    (elixir 1.13.3) src/elixir_import.erl:98: :elixir_import.calculate/6
    (elixir 1.13.3) src/elixir_import.erl:28: :elixir_import.import/4
10

Can you share your button module?

1 Like
11

Sure, it’s pretty basic.

defmodule HydroplaneWeb.Components.Shared.Button do
  use HydroplaneWeb, :component

  def action_button(assigns) do
    extra = assigns_to_attributes(assigns, [:__slot__, :inner_block])

    ~H"""
    <button {extra} class="bg-slate-100 hover:bg-slate-200 py-1 mx-1 rounded text-slate-500 hover:text-slate-600">
      <%= render_slot(@inner_block) %>
    </button>
    """
  end
end
12

What’s use HydroplaneWeb :components ?

13

Is def components in HydroplaneWeb using view_helpers() also? Then you’re running into a circle when compiling: view_helpers → import HydroplaneWeb.Components.Shared.Button → use :components → view_helpers.

3 Likes
14

That’s what I think as well.

1 Like
15

Right!

Suggestion: don’t use use HydroplaneWeb, :component. We will most likely do use Phoenix.Component itself in new Phoenix apps on each component module and favor explicit imports per module.

Also 1 module with multiple shared components is better than 10 modules with individual components. :slight_smile:

1 Like
16

It’s just component function in the *_web.ex file. It’s created by default with the project.

  def component do
    quote do
      use Phoenix.Component

      unquote(view_helpers())
    end
  end
17

In this case, how can I make all the other view helpers easily available in the component modules if I’m doing use Phoenix.Component? It seems like use HydroplaneWeb, :component is the expected usage in phoenix as of right now.

Also should this be the same for use HydroplaneWeb, :live_component and use Phoenix.LiveComponent and the others? Will there be another way to share code between different component modules?

Lastly, is somebody able to explain exactly why the circular dependency was creating that error?