live_file_input doesn't render after upgrading to Phoenix 1.7.10


I’m new to Elixir, Phoenix & LiveView and I have the following issue:

My original .html.leex file looked like this:

<form id="upload-form" phx-submit="save" phx-change="validate">

  <%= live_file_input @uploads.invoice_data %>

  <button type="submit">Upload</button>

…and it rendered properly. Then I upgraded Phoenix to version 1.7.10 and, after the upgrade, I got this error:

    ** (ArgumentError) assign/3 expects a socket from Phoenix.LiveView/Phoenix.LiveComponent  or an assigns map from Phoenix.Component as first argument, got: %{__given__: %{accept: ".xls"}, accept: ".xls"}You passed an assigns map that does not have the relevant change tracking information. This typically means you are calling a function component by hand instead of using the HEEx template syntax. If you are using HEEx, make sure you are calling a component using:

    <.component attribute={value} />

…so I changed the .leex file as requested:

<form id="upload-form" phx-submit="save" phx-change="validate">

  <. live_file_input upload={@uploads.invoice_data} />

  <button type="submit">Generate invoice</button>

…but now the live_file_input component is rendered as simple text instead of an input.

How can I fix it?


There seems to be a space between the dot and your component name.
Change it to

<.live_file_input … />
1 Like

Nice catch but it still doesn’t render properly, even without the space.

It behaves like the renderer doesn’t recognize the <. /> syntax. See below the resulting form in HTML

<form id="upload-form" phx-submit="save" phx-change="validate">

  &lt;.live_file_input upload={@uploads.invoice_data} /&gt;

  <button type="submit">Generate invoice</button>

Did you also rename the file to use .heex as extension?

Good point!

Short version: I changed the leex o heex and now it renders correctly. Thanks!

Long version:
It was not that easy because, after I saw that the view is rendered properly, I wanted to see if the space that @kevinschweikert pointed out was a real issue so I added it back and then I got the compilation error:

error: undefined function /1 (expected SolarisWeb.InvoicingLive to define such a function or for it to be imported, but none are available)

OK. So @kevinschweikert was right. The space had to be removed and I removed it again but then I got the following error:

function SolarisWeb.InvoicingLive.__live__/0 is undefined (module SolarisWeb.InvoicingLive is not available)

…which made me spend some time trying to figure it out and hopping from error to error and restarting the server and pulling my hair out until I realized that a mix clean solves the problem.

Anyway, the happy end is what matters. Thanks a lot for the help!

1 Like