Programming Phoenix LiveView B2.0: P168 "Render the Demographic Form"

Community PragProg Customers
,
1

A further clarification: When I move to the “Stateful components” section and run a compile with “iex -S mix”, the compile works. When I then try “mix phx.server” i get the same error as shown below. Interestingly, when I then went back to the stateless directory (where I had originally tried the “mix phx.server” and got the error below, I now got the same error when running “iex -S mix”

When attempting this, the server crashes with an error about @assign content not being available in the eex template. I have diffed all the files created following the book text with the ones in your code zip, but see no differences. Interestingly, the code in the “stateless_components” directory of the zip doesn’t compile either. I’ve copied the two sets of errors below.

I’ve moved on and I’m no longer trying to resolve this. Perhaps I have done something in error that I can’t see myself. But perhaps there is an error in the book’s code. Debugging this is beyond me.

Error when I attempt to compile the code in your zip file (downloaded today) under stateless_components:

== Compilation error in file lib/pento_web/live/product_live/show.ex ==
** (EEx.SyntaxError) /Users/alister/Programming/Practice/elixir/liveview/code/stateless_components/pento/lib/pento_web/live/product_live/show.html.leex:43:1: missing token ‘%>’
(eex 1.11.4) lib/eex/compiler.ex:37: EEx.Compiler.compile/2
(phoenix_live_view 0.15.1) expanding macro: Phoenix.LiveView.Renderer.before_compile/1
lib/pento_web/live/product_live/show.ex:9: PentoWeb.ProductLive.Show (module)
(elixir 1.11.4) lib/kernel/parallel_compiler.ex:314: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7

Error when I attempt to run the code I created following the text in B2.0:

[error] #PID<0.18693.0> running PentoWeb.Endpoint (connection #PID<0.18691.0>, stream id 1) terminated
Server: localhost:4000 (http)
Request: GET /survey
** (exit) an exception was raised:
** (ArgumentError) assign @content not available in eex template.

Please make sure all proper assigns have been set. If this
is a child template, ensure assigns are given explicitly by
the parent template as they are not automatically forwarded.

Available assigns: [:changed, :changeset, :demographic, :flash, :id, :socket, :user]

    (phoenix_live_view 0.15.4) lib/phoenix_live_view/engine.ex:877: Phoenix.LiveView.Engine.fetch_assign!/2
    lib/pento_web/live/demographic_live/form_component.html.leex:1: anonymous fn/2 in PentoWeb.DemographicLive.FormComponent.render/1
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:430: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/6
    (elixir 1.11.4) lib/enum.ex:2193: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:430: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/6
    (elixir 1.11.4) lib/enum.ex:2193: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:130: Phoenix.LiveView.Diff.render/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/static.ex:288: Phoenix.LiveView.Static.to_rendered_content_tag/4
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/static.ex:148: Phoenix.LiveView.Static.render/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/controller.ex:35: Phoenix.LiveView.Controller.live_render/3
    (phoenix 1.5.8) lib/phoenix/router.ex:352: Phoenix.Router.__call__/2
    (pento 0.1.0) lib/pento_web/endpoint.ex:1: PentoWeb.Endpoint.plug_builder_call/2
    (pento 0.1.0) lib/plug/debugger.ex:136: PentoWeb.Endpoint."call (overridable 3)"/2
    (pento 0.1.0) lib/pento_web/endpoint.ex:1: PentoWeb.Endpoint.call/2
    (phoenix 1.5.8) lib/phoenix/endpoint/cowboy2_handler.ex:65: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.8.0) /Users/alister/Programming/Practice/elixir/liveview/pento/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.8.0) /Users/alister/Programming/Practice/elixir/liveview/pento/deps/cowboy/src/cowboy_stream_h.erl:300: :cowboy_stream_h.execute/3
2

Thanks @asibbald! I’ll look into this and let you know what I find.

3

Hi again @asibbald,
I just tried to run the Phoenix server using the code in the stateless_components directory and was able to compile and run the server without issue. Looking more closely at the error message you reported, this is the part that is important:

** (EEx.SyntaxError) /Users/alister/Programming/Practice/elixir/liveview/code/stateless_components/pento/lib/pento_web/live/product_live/show.html.leex:43:1: missing token ‘%>’

Looks like there is a syntax error on line 43 of stateless_components/pento/lib/pento_web/live/product_live/show.html.leex. Is it possible that you edited that line by mistake and accidentally eliminated a %> tag? I would start by checking that. If you’re still stuck and you want to push up your code to a repo to share with me, I’d be happy to take a look.

4

Regarding the second error your reported here @asibbald:

Error when I attempt to run the code I created following the text in B2.0:

[error] #PID<0.18693.0> running PentoWeb.Endpoint (connection #PID<0.18691.0>, stream id 1) terminated
Server: localhost:4000 (http)
Request: GET /survey
** (exit) an exception was raised:
** (ArgumentError) assign @content not available in eex template.

When I run the server in the stateful_components directory, as well as the stateless_components directory, I able to run the server successfully and do not see this error.

This error means that in the pento_web/live/demographic_live/form_component.html.leex file, there is some code that looks something like this <%= @content %>, and that there is no such :content key in the socket assigns of the supporting live view/component.

There is a portion of the Stateless Components chapter that instructs you to add this line of code to the pento_web/live/demographic_live/form_component.html.leex file, like this:

<div class="hero"><%= @content %></div>

You’re meant to do so after adding the following to this file’s pento/lib/pento_web/live/survey_live.html.leex call to render the form component like this:

<section class="row">
  <%= live_component @socket,
    PentoWeb.DemographicLive.FormComponent,
    content: "Hello to the Demographic Form Component" %>
</section>

This would have added the key :content to the form component’s socket assigns and therefore made the @content assignment available in the form component’s template.

All of this is on/around page 165, under the “Build The Demographic Form” heading.

So, what I think happened is:

  • You added the code as you were instructed to on page 165
  • Then, later on, you removed the content: argument in the call to live_component here:
# pento/lib/pento_web/live/survey_live.html.leex
<section class="row">
  <%= live_component @socket,
    PentoWeb.DemographicLive.FormComponent,
    content: "Hello to the Demographic Form Component" %>
</section>
  • You did not remove the call to render @content in the form component’s template here:
# pento_web/live/demographic_live/form_component.html.leex

<div class="hero"><%= @content %></div>

Let me know if that makes sense!