Error in phx.gen.live generated leex files

Hello there,

After phx.gen.live in this particular file “show.html.leex” it says “undefined function live_modal/3”. In the index.html.leex it does not show that error.

Compilation error in file lib/real_estate_web/live/property_live/show.ex ==
(CompileError) lib/real_estate_web/live/property_live/show.html.leex:4: undefined function live_modal/3

Thanks

It’s because You did not create the project with the --live parameter, just create a dummy with --live, and check in the live directory for the modal file.

I created the project with the --live parameter. Only in one particular generated .leex file this error pops up. In the .leex files the “live_modal/3” function does not show any error

ok, my bad… but You would have better answer if You show the code leading to this error.

Thanks for your support.

After generating phx.gen.live files while doing ecto.migrate i receive a compile error showing “live_modal/3” undefined in the .leex template files. Below is the entire code from the terminal starting from generating phx.gen.live

anil@admin:~/projects/elixirapps/real_estate$ mix phx.gen.live Properties Property properties user_id:references:users name:string price:decimal description:text
The following files conflict with new files to be generated:

  • test/real_estate_web/live/property_live_test.exs

See the --web option to namespace similarly named resources

Proceed with interactive overwrite? [Yn] y

  • creating lib/real_estate_web/live/property_live/show.ex
  • creating lib/real_estate_web/live/property_live/index.ex
  • creating lib/real_estate_web/live/property_live/form_component.ex
  • creating lib/real_estate_web/live/property_live/form_component.html.leex
  • creating lib/real_estate_web/live/property_live/index.html.leex
  • creating lib/real_estate_web/live/property_live/show.html.leex
  • creating test/real_estate_web/live/property_live_test.exs
  • creating lib/real_estate_web/live/modal_component.ex
  • creating lib/real_estate/properties/property.ex
  • creating priv/repo/migrations/20210112030745_create_properties.exs
  • creating lib/real_estate/properties.ex
  • injecting lib/real_estate/properties.ex
  • creating test/real_estate/properties_test.exs
  • injecting test/real_estate/properties_test.exs

Add the live routes to your browser scope in lib/real_estate_web/router.ex:

live "/properties", PropertyLive.Index, :index
live "/properties/new", PropertyLive.Index, :new
live "/properties/:id/edit", PropertyLive.Index, :edit

live "/properties/:id", PropertyLive.Show, :show
live "/properties/:id/show/edit", PropertyLive.Show, :edit

Remember to update your repository by running migrations:

$ mix ecto.migrate

anil@admin:~/projects/elixirapps/real_estate$ mix ecto.migrate
Compiling 10 files (.ex)

== Compilation error in file lib/real_estate_web/live/property_live/show.ex ==
**** (CompileError) lib/real_estate_web/live/property_live/show.html.leex:4: undefined function live_modal/3**
** (elixir 1.10.4) src/elixir_locals.erl:114: anonymous fn/3 in :elixir_locals.ensure_no_undefined_local/3**
** (stdlib 3.13.2) erl_eval.erl:680: :erl_eval.do_apply/6**
** (elixir 1.10.4) lib/kernel/parallel_compiler.ex:304: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7**

Phoenix should have generated a LiveHelpers file for you which should be included in the def live do section of your lib/real_estate_web/web.ex like this:

import RealEestateWeb.LiveHelpers

That’s the file that defines live_modal. Something has gone wrong or missing somewhere for this entry to be missing.

1 Like

There seems to be some missing somewhere. Restarting the project might work. Thanks for the support Jose.

Based on the naming of your modules, I would guess that you’re following the Moura tutorial on Lean Panda.
In that tutorial, he instructs creating a LiveHelpers module before you use the phx.gen.live generator for the first time.
If you look in the Phoenix dependency folder in the Mix.Tasks.Phx.Gen.Live module (deps/phoenix/lib/mix/tasks/phx.gen.live.ex), you will see that there is an explanation for how phx.gen.live works.

When this command is run for the first time, a ModalComponent and
LiveHelpers module will be created, along with the resource level
LiveViews and components, including an IndexLive, ShowLive, FormComponent
for the new resource.

Unfortunately, the naming of the module from the tutorial frustrates the generation of this file. This is because the generator uses a maybe_inject_helpers function to determine if the file has already been generated (which it looks like it has because of the manually created file).

Two remedies I found to work are:

  1. Rename your LiveHelpers module temporarily, use phx.gen.live again to generate the template file, then copy the contents of your tutorial “LiveModule” into the generated file.
  2. Copy the content of the Phoenix template into your existing module. The template can can be found in the Phoenix deps folder at deps/phoenix/priv/templates/phx.gen.live/live_helpers.ex (and replace <%= inspect context.web_module %> in the live_modal function and docs with the name of your project’s web module; in the above/tutorial’s case RealEstateWeb) (probably more hassle)
6 Likes

Yes, that was a fine tutorial. I knew something was going wrong with the generated files but couldn’t figure it out at all. Thanks for your great support.

Hello,

I got this error too when I already had created a live_helpers.ex file myself before running the generation command. It didn’t output any error for me and didn’t append to the file so the function was missing from the code.

Probably something similar could’ve happened here.

I also just got this error(undefined function modal/1). I have an existing app with an existing live_helpers.ex file. I got the same compilation error on the generated show.html.leex and index.html.heex files. I simply reformated the modal call back into the old format and everything compiled and I got my mix.ecto.migrate to finish. This is probably not ideal since I still get warnings about passing the socket to a live component, but I just don’t want to do battle with the app. I’m just ignoring the warnings for now since passing the socket to the live_component doesn’t seem to cause any issues.

Old format meaning this:

<%= if @live_action in [:new, :edit] do %>
  <%= live_modal @socket, MyAppWeb.GeolocationLive.FormComponent,
    id: @geolocation.id,
    title: @page_title,
    action: @live_action,
    geolocation: @geolocation,
    return_to: Routes.geolocation_index_path(@socket, :index) %>
<% end %>

You mention show.html.leex and index.html.heex, did you perhaps mean show.html.heex?

It seems like you upgraded your live view to 1.6 and now the generated heex templates are trying to use the new modal helper but unfortunately phx.gen.live doesn’t add the function if the LiveHelpers module already exists. Of course you may continue using the old live_modal helper as you’re doing, but you can also add the missing functions manually from deps/phoenix/priv/templates/phx.gen.live/live_helpers.ex or follow point (1) in the solution post above.

2 Likes

Good catch! I meant show.html.heex. Thank you for that tip about where to find the functions to manually paste them into my existing live_helpers. Unfortunately, that caused a compilation error (see below) so I cut it back out. This was the reason I just went back to the old style. I’m desperately trying to finish my app and upgrading to 1.6 has already caused a big delay. I’m just too new at Phoenix and LiveView to troubleshoot errors that arise from this upgrade. I posted the solution above for other beginners like myself. I’ll probably have to eventually bring everything up to the new format … but that’s for another day (when I have more experience under my belt).

== Compilation error in file lib/my_app_web/live/live_helpers.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/my_app_web/live/live_helpers.ex:74:11: expected attribute name
    (phoenix_live_view 0.17.6) lib/phoenix_live_view/html_tokenizer.ex:293: Phoenix.LiveView.HTMLTokenizer.handle_attribute/5
    (phoenix_live_view 0.17.6) lib/phoenix_live_view/html_engine.ex:121: Phoenix.LiveView.HTMLEngine.handle_text/3
    (eex 1.13.2) lib/eex/compiler.ex:49: EEx.Compiler.generate_buffer/4
    (phoenix_live_view 0.17.6) expanding macro: Phoenix.LiveView.Helpers.sigil_H/2
    lib/my_app_web/live/live_helpers.ex:65: MyAppWeb.LiveHelpers.modal/1

I went through the same pain trying to find all the ways things changed in the new updates, so I feel your frustration. Hope you find some time to catch up soon :raised_hands:

Perhaps this will help when you get there

2 Likes