Live Components suddenly not compiling, app crashing with UndefinedFunctionError

Phoenix Forum Questions / Help
1

I’ve been re-arranging my code to break a larger LiveView app into smaller Live Components based on separation of concerns. In the main app I alias the component module name (BoardComponent), then render:

<%= live_component @socket, BoardComponent,
      active_user: @active_user,
      user_cache: @user_cache,
      active_board: @active_board %>

I’ve done this with several different components so far, with no problems. But after doing a little work today, I’m suddenly getting hit with

** (UndefinedFunctionError) function MyAppWeb.BoardComponent.__live__/0 is undefined (module MyAppWeb.BoardComponent is not available)

But not just for the BoardComponent… when I try to access a different one - same exact error:

** (UndefinedFunctionError) function MyAppWeb.PostComponent.__live__/0 is undefined (module MyAppWeb.PostComponent is not available)

Even components that were not even touched by today’s work, for some reason are “not available”. And it’s really strange… After reloading and recompiling a few times, I can get some modules to work but not others… and I’m not changing the code AT ALL - just killing and restarting mix phx.server gives different results each time.

Any ideas what could be going on? I didn’t really make any major changes today.

2

Are you perhaps still using use Phoenix.LiveView when you should now be using use Phoenix.LiveComponent?

3

I’m using

use MyAppWeb, :live_component
4

I fixed my own issue by making non-changes
e.g. {:ok, socket} to:

{:ok,
  socket
}

doing that one-by-one for all my components, and Elixir then recompiled the files and now there are no errors. Even if I revert the changes back to {:ok, socket} it still works. Very strange…

2 Likes
5

@APB9785 sounds like something in your _build directory got weird. While I generally find that compiler issues with Elixir are rare, when they do happen, they are generally fixed for me by doing rm -rf _build

5 Likes
6

Did you by any chance compiled the code or ran the app with different versions of Elixir:

  • like be trying out the app inside a docker container with the entire project mapped as a volume?
  • or by using your software version manager tool, like asdf to run the app with different Elixir version?

If you have done this then the _build folder get’s itself in a weird state. Also when trying out new versions of Elixir you may end-up with incompatible versions in your mix.lock and deps folder.

2 Likes
7

Thanks for the info! But in this case, I didn’t do anything with docker or asdf. I was just moving around some handle_event/3 clauses after separating a settings menu into its own LC.

1 Like
8

So it seems that your solution is to do what is suggested here :slight_smile:

If you could replicate the issue in a sample Phoenix repo then you could open a bug report for the Elixir compiler.

9

I just came across this same error message and I don’t think I touched the code between working and not-working states. Walked away from the computer with no compile errors, came back and refreshed a webpage on localhost and it gave the same error as OP. I commented out a couple uncommitted changes (a route and the live_view file for that route) to remove all unstaged edits to get back to the commit that I’m sure was working, and the error persisted.

** (exit) an exception was raised:
    ** (UndefinedFunctionError) function MyAppWeb.CheckoutLive.Show.__live__/0 is undefined (module MyAppWeb.CheckoutLive.Show is not available)
        MyAppWeb.CheckoutLive.Show.__live__()
        (phoenix_live_view 0.17.5) lib/phoenix_live_view/static.ex:239: Phoenix.LiveView.Static.load_live!/2
        (phoenix_live_view 0.17.5) lib/phoenix_live_view/static.ex:83: Phoenix.LiveView.Static.render/3
        (phoenix_live_view 0.17.5) lib/phoenix_live_view/controller.ex:38: Phoenix.LiveView.Controller.live_render/3
        (phoenix 1.6.5) lib/phoenix/router.ex:355: Phoenix.Router.__call__/2
        (my_app_web 0.1.0) lib/my_app_web/endpoint.ex:1: MyAppWeb.Endpoint.plug_builder_call/2
        (my_app_web 0.1.0) lib/plug/debugger.ex:136: MyAppWeb.Endpoint."call (overridable 3)"/2
        (my_app_web 0.1.0) lib/my_app_web/endpoint.ex:1: MyAppWeb.Endpoint.call/2

Nuked the _build to get back to working before wondering if this was an error with a resolution. Are there useful commands/spelunking to do when a _build folder gets into a confused state?

10

I had exactly the same problem after some formatting changes at the live_component call. Deleting _build did not solve it. After deleting node_modules/.cache the error was gone. I also noticed some minor CSS issues also solved after deleting.

1 Like
11

Deleting _build worked for me after copying an existing live module to a new file name.

12

I got the same message. Figured out the issue has to do with code editor. When I was adding route for liveview, my code editor (VSCode with elixir extensions) suggested modules (one of which is my LiveView module), then I click “enter” on it and code editor automatically imports alias MyApp.MyLiveViewComponent which basically screws up everything. then I go and delete the import, and voila, error is gone

6 Likes
13

Just want to say thanks as this was exactly my issue. VS Code with elixir-tools auto imports the module which we don’t want in this case.

1 Like
14

Thank man, you saved my day. Had to create an account on this forum just to thank you!

1 Like
15

To give some more color as to why this is a problem - this block

  scope "/", MyAppWeb do
    pipe_through :browser

    live "/", SearchLiveView
  end

automatically adds MyAppWeb to all items in the scope macro. When the alias is defined, the live block gets expanded to MyAppWeb.SearchLiveView, which gets doubly expanded to MyAppWeb.MyAppWeb.SearchLiveView when the scope macro gets applied.

16

thank you so much, i thought i was going crazy for a second. looking through docs after docs

the import is very sneaky