Regarding Chris McCord's Twitter Tutorial

Phoenix Forum Questions / Help
,
1

HI,

Around minute 12 he is iimplementing the update part with temporary_assigns and phx-update=“prepend”, I got mind blown, BUT, I’m having this error when I update:

** (RuntimeError) found duplicate ID 4 for component ChirpWeb.PostLive.PostComponent w
hen rendering template

And I quadrupled check the code. The DOM still gets updated, but I would like to have things correct, if this suppose to happen?

2

I’m not sure about that error, but maybe you can check your code against this community re-implementation of chirp:

from this topic: Where is the chirp repo for the real-time Twitter clone in 15 minutes by Chris McCord?

3

Code is the same, the difference is the liveview version, I got 0.13, he has 0.12.1.

I tried to use 12.1 I am getting other errors and by googling the suggestion is to update liveview :D.

So something changed in 0.13

4

One more thing: this happens when I have 2 browsers open so I can see how it updates on both like Chris is doing in the video.

If I have only one browser opened there is no such error

5

Hello! I just had this issue and I adjusted this line. Hope this helps with your situation

1 Like
6

What did you adjust? Seeing this same error

7

I’m running through this tutorial now. I kept getting a (FunctionClauseError) no function clause matching error.

Took me a while to read docs and fix it.

I’m guessing the API changed, but I had to change this

  defp broadcast({:ok, message} = event) do
    Phoenix.PubSub.broadcast(DmClient.PubSub, "messages", {event, message})
    {:ok, message}
  end

to

  defp broadcast({:ok, message} = event, eventName) do
    Phoenix.PubSub.broadcast(DmClient.PubSub, "messages", {eventName, message})
    {:ok, message}
  end
3 Likes
8

Sorry for giving you an incomplete answer. I changed the id: :modal into the :id I passed into the opts kw. My situation is I have to re-use the component several times in a page so using the same :id is giving issues.

2 Likes