Generated code raises KeyError in core_components.ex for: 'item' and 'col'

Phoenix Forum Questions / Help
,
1

greetings. first post/question. sorry to even bother anyone.

i started a project with a lot of generated code, but i’m still having trouble hooking things up (router, context, view), all-the-while learning the framework 'n language. I feel like i’m getting closer to the learning curve’s edge and finding the promised productive-land, so i don’t want to give up yet, but something here just doesn’t seem right to me…:

i’ve got two similar errors that error on core_components.ex. the browser displays these errors:

KeyError at GET /games/1
key :item not found in: %{
  __changed__: nil,
  inner_block: [
    %{
      __slot__: :inner_block,
      inner_block: #Function<8.124877290/2 in GameArchiveWeb.GameHTML.show/1>
    }
  ],
  __given__: %{
    __changed__: nil,
    inner_block: [
      %{
        __slot__: :inner_block,
        inner_block: #Function<8.124877290/2 in GameArchiveWeb.GameHTML.show/1>
      }
    ]
  }
}

and

KeyError at GET /games
key :col not found in: %{
  id: "games",
  rows: [
    %GameArchive.Game{
      __meta__: #Ecto.Schema.Metadata<:loaded, "games">,
      id: 1,
      title: "test",
      alt_titles: ["string 1", "string 2"],
      makers: ["string 1", "string 2"],
      ...
      (LIST ALL Game ROWS FROM DB)
      ...
action: [
      %{
        __slot__: :action,
        inner_block: #Function<30.124877290/2 in GameArchiveWeb.GameHTML.index/1>
      },
      %{
        __slot__: :action,
        inner_block: #Function<31.124877290/2 in GameArchiveWeb.GameHTML.index/1>
      }
    ],
    __changed__: nil,
    inner_block: [
      %{
        __slot__: :inner_block,
        inner_block: #Function<29.124877290/2 in GameArchiveWeb.GameHTML.index/1>
      }
    ],
    row_click: #Function<28.124877290/1 in GameArchiveWeb.GameHTML.index/1>
  },
  __changed__: nil,
  inner_block: [
    %{
      __slot__: :inner_block,
      inner_block: #Function<29.124877290/2 in GameArchiveWeb.GameHTML.index/1>
    }
  ],
  row_click: #Function<28.124877290/1 in GameArchiveWeb.GameHTML.index/1>,
  row_id: nil,
  row_item: &Function.identity/1
}

in core_components.ex:

<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
# and
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>

it seems to me the core_components html template is using/expecting my database schema to have a field named col and item, but that can’t be right…, can it??

my Games.ex (confusing name, i kno) context

  def list_games do
    Repo.all(Game) # i think this selects all by default..
  end

  def get_game!(id) do
    Repo.get(Game, id)
  end

router.ex

    resources "/games", GameController # macro magicks

phew… i hope that’s everything to understand the problem… there’s just so much abstraction…!

i used a lot of generation stuff: schema first, then html (–no-schema), but the gen’d context file was unimplemented (raise TODO), so i tried to implement it (with the help of docs/context), and now i’m just going through a bunch of errors to get things to work…

again, sorry to bother. I’m thinking maybe it would have been a smoother experience to simply use phx.gen.html to gen everything (schema, context, html, router?) at the same time…

2

The KeyErrors are telling you that :item and :col are not found in the assigns map passed to the function components (in this case the table/1 and list/1 components in core_components.ex). You can tell it’s an assigns map because it has keys like __changed__ which are used by LiveView to track changes. Assigns are used like @item in your HEEx templates but they are converted into map operations by the compiler.

In this case, the assigns in question are actually slots which are passed in as assigns by LiveView. The problem is that the @item and @col assigns haven’t been set (you can see in the error message that they are missing from the assigns map), which will happen if you haven’t included any <:col></:col> or <:item></:item> slots in your tables and lists. These are required slots, so they don’t get a default value - you have to provide them.

Missing required slots also emit a compile-time warning telling you that they’re missing - if you check your console output after compilation (or you have inline warnings in your editor) then you should see them.

2 Likes
3

phew, thank you so much!! i’m sure i’ll figure more things out while slowly digesting all of this…

you are right about the warnings:

    warning: missing required slot "col" for component GameArchiveWeb.CoreComponents.table/1
    │
 10 │ <.table id="games" rows={@games} row_click={&JS.navigate(~p"/games/#{&1}")}>
    │ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    │
    └─ lib/game_archive_web/controllers/game_html/index.html.heex:10: (file)

    warning: missing required slot "item" for component GameArchiveWeb.CoreComponents.list/1
    │
 11 │ <.list>
    │ ~~~~~~~
    │
    └─ lib/game_archive_web/controllers/game_html/show.html.heex:11: (file)

habits from other languages/compilers made me overlook/ignore warnings. I only had 3. I’ll def keep an eye on them from now on, and look there first, as opposed to the errors on the web-page.

4

YESSSSSSS. thank you @garrison!!! i can see the page. i can seee the light!

after some random googling around how tables 'n lists are supposed to look like, i’ve got this working in the index.html.heex and show.html.heex files:

# added the col(umns) to the top of the table body
<.table id="games" rows={@games} row_click={&JS.navigate(~p"/games/#{&1}")}>
  <:col :let={game} label="id"><%= game.id %></:col>
  <:col :let={game} label="title"><%= game.title %></:col>
  # ...

# this list was previously empty!
<.list>
  <:item title="id"><%= @game.id %></:item>
  <:item title="title"><%= @game.title %></:item>
  <:item title="alt_title"><%= @game.alt_titles %></:item>
  <:item title="makers"><%= @game.makers %></:item>
  # ...
</.list>

it was working for a whole minute, until it wasn’t:

no "index" html template defined for GameArchiveWeb.GameHTML  (the module does not exist)

lol, on to the next error. thanks again tho!

edit: fixed the last error by removing the _build folder… :confused: (no code was changed)