Live_render does not render content - only wrapping div

I’ve added a /lib/fish_web/live folder with a hero_component.ex and a hero_component.html.leex - and now I’m chasing the Phoenix.LiveView — Phoenix LiveView v0.20.2 and particularly where it says

You can also live_render from any template:

So I’ve added <%= live_render @conn, FishWeb.HeroComponent %> to my /lib/fish_web/templates/page/index.html.eex !

Sure enough - the wrapping div is there alright

<div data-phx-session="SFMyNTY.g2gDaAJhBHQAAAAHZAACaWRtAAAAFHBoeC1GaDJRSnM1Uk5Lajlud0FEZAAKcGFyZW50X3BpZGQAA25pbGQACHJvb3RfcGlkZAADbmlsZAAJcm9vdF92aWV3ZAAcRWxpeGlyLkZpc2hXZWIuSGVyb0NvbXBvbmVudGQABnJvdXRlcmQAA25pbGQAB3Nlc3Npb250AAAAAGQABHZpZXdkABxFbGl4aXIuRmlzaFdlYi5IZXJvQ29tcG9uZW50bgYAM1NECXMBYgABUYA.R9teP9DJXvo0CtI-3vs_slQewBd3npFAySNG8adXI_U" data-phx-static="SFMyNTY.g2gDaAJhBHQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GaDJRSnM1Uk5Lajlud0FEbgYANVNECXMBYgABUYA.YimJVVUJLNLTquNglPydtN1tWdhYQnxV7K3zJmtoBHI" data-phx-view="HeroComponent" id="phx-Fh2QJs5RNKj9nwAD" class="phx-connected" data-phx-root-id="phx-Fh2QJs5RNKj9nwAD"></div>

but no content - and I change it content every 30 seconds!

I’m aware that the ‘wrapper’ has the phx-connected class - and my log does look fairly peachy I’d say?

Erlang/OTP 22 [erts-10.4.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe] [dtrace]

[info] Running FishWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access FishWeb.Endpoint at http://localhost:4000
Interactive Elixir (1.10.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> 
webpack is watching the files…

Hash: 1c1f1dae74551e8657ce
Version: webpack 4.41.5
Time: 6936ms
Built at: 2020-07-01 9:25:26
                Asset       Size  Chunks                   Chunk Names
       ../css/app.css   3.54 MiB     app  [emitted]        app
   ../css/app.css.map    4.5 MiB     app  [emitted] [dev]  app
       ../favicon.ico   1.23 KiB          [emitted]        
../images/phoenix.png   13.6 KiB          [emitted]        
        ../robots.txt  202 bytes          [emitted]        
               app.js    168 KiB     app  [emitted]        app
           app.js.map    196 KiB     app  [emitted] [dev]  app
Entrypoint app = ../css/app.css app.js ../css/app.css.map app.js.map
[0] multi ./js/app.js 28 bytes {app} [built]
[./css/app.scss] 39 bytes {app} [built]
[./js/app.js] 1.32 KiB {app} [built]
    + 6 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!css/
app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./css/app.scss] ./node_
modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./css/app.scss 3.7 MiB {mini-css-extract-plu
gin} [built]
        + 1 hidden module
[info] GET /
[debug] Processing with FishWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 72ms
[info] GET /
[debug] Processing with FishWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 2ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 143µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "LiwucT0kMy8sQgIGCTUkKwAzeCszdxcqBiz3pmeg_4nGhvKzDZLob2FP", "_mounts" => "0", "vsn" => "2.0.0"}
 

I’m obviously doing something wrong - I just cannot put my finger on it :frowning:

My GitHub repo - GitHub - wdiechmann/fish: With this repo you will have a working first stepping stone, albeit a regrettably very rudimentary one at it, to deploying Elixir/Phoenix apps using Dokku and Docker containers - has all the murky details.

:wave:

Seems like live_render expects a live view, not a live component. Oops, HeroComponent is indeed a live view.

You are missing <%= @inner_content %> in live.html.leex.

1 Like

what?! dam**t - That’s some catch!! :heart:

Okay - so LV loads live.html.leex with what contents any ‘render’ provides, hmmm - I realize I’m more or less like that 5yr old being thrown into the pool: gotta pull them arms, boy! swim now - swim, wait! Keep kicking 'dem legs of yours too!

Anyways - but then I have another issue, 'cause when I add <%= @inner_content %> I’m left with this issue :cry: (and there is something fishy about this - 'cause the example referenced above expressively tells me to use live_render @conn... and yet it’s not assigned which BTW Google tells me is all good and well, as I’ll have to assign it to @socket which BTW is not recommended)

Request: GET /
** (exit) an exception was raised:
    ** (ArgumentError) assign @conn 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: [:flash, :live_action, :live_module, :scans, :socket]

        (phoenix_live_view 0.13.3) lib/phoenix_live_view/engine.ex:861: Phoenix.LiveView.Engine.fetch_assign!/2
        (fish 0.1.0) lib/fish_web/live/hero_component.html.leex:26: anonymous fn/2 in FishWeb.HeroComponent.render/1
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/diff.ex:250: Phoenix.LiveView.Diff.traverse/5
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/diff.ex:321: anonymous fn/3 in Phoenix.LiveView.Diff.traverse_dynamic/5
        (elixir 1.10.2) lib/enum.ex:2111: Enum."-reduce/3-lists^foldl/2-0-"/3
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/diff.ex:250: Phoenix.LiveView.Diff.traverse/5
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/diff.ex:97: Phoenix.LiveView.Diff.render/3
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/static.ex:284: Phoenix.LiveView.Static.to_rendered_content_tag/4
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/static.ex:144: Phoenix.LiveView.Static.render/3
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/helpers.ex:171: Phoenix.LiveView.Helpers.live_render/3
        (fish 0.1.0) lib/fish_web/templates/layout/root.html.leex:17: anonymous fn/2 in FishWeb.LayoutView."root.html"/1
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/engine.ex:123: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/1
        (phoenix_live_view 0.13.3) lib/phoenix_live_view/engine.ex:139: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/3
        (phoenix 1.5.3) lib/phoenix/controller.ex:776: Phoenix.Controller.render_and_send/4
        (fish 0.1.0) lib/fish_web/controllers/page_controller.ex:1: FishWeb.PageController.action/2
        (fish 0.1.0) lib/fish_web/controllers/page_controller.ex:1: FishWeb.PageController.phoenix_controller_pipeline/2
        (phoenix 1.5.3) lib/phoenix/router.ex:352: Phoenix.Router.__call__/2
        (fish 0.1.0) lib/fish_web/endpoint.ex:1: FishWeb.Endpoint.plug_builder_call/2
        (fish 0.1.0) lib/plug/debugger.ex:132: FishWeb.Endpoint."call (overridable 3)"/2
        (fish 0.1.0) lib/fish_web/endpoint.ex:1: FishWeb.Endpoint.call/2
 

really am left with a feeling of being herded around here - but appreciating every nudge on the way :laughing:

Not the referencing of @conn in the live_render call is the problem. You are using @conn inside hero_component.html.leex template. Being a path helper, you can replace @conn with @socket.

1 Like

@sfusato thank you so much!

TIL that @conn and @socket are interchangeable when used to steer path helpers!

was:

<%= link "Nyt depot", to: Routes.pow_registration_path(@conn, :new), class: "w-full..." %> 

should be:

<%= link "Nyt depot", to: Routes.pow_registration_path(@socket, :new), class: "w-full..." %> 

(when used in templates called by live_render)