"Target element not found!" false positives

[ghiculescu]

Let's say you have a stream response that does two things:

1. Appends a new div.
2. Does something with that div, eg. scrolls it into view

You'll get a warning like this:

The error is incorrect because the first stream adds the element, so when the second stream runs the element does exist.

I think that's happening because consoleLogTurboStream runs before any of the streams are rendered, but I don't really know how to debug extensions in devtools so can't confirm.

[ghiculescu]

ps. this extension slaps 👑 💯 😻

[leonvogt]

Hi @ghiculescu,

this extension slaps

thank you very much!! ☺️

Thats a bug that I havn't seen before but totally makes sense when I think about it.

I think that's happening because consoleLogTurboStream runs before any of the streams are rendered

100% correct. We use the turbo:before-stream-render event to trigger the console logs. At this point the streams are not rendered yet and the HTML isn't affected by the Turbo Streams.

Not quite sure how to fix this yet but I will look into it.
I see these potential solutions:

1. Trigger the console logs after the streams are rendered. This would require some sort of turbo:after-stream-render event which doesn't exist yet.
2. Search not only in the HTML for the target but also in the receiving streams.
3. Add a delay to the console logs. This would be a quick fix but not a very elegant one.

I don't really like 2. and 3. to be honest.
I'll think about it more and see if a better solution comes up.
If someone has a an idea, feel free to share it

[ghiculescu]

You could try adding an after-render event here https://github.com/hotwired/turbo/blob/f88bfe45ed44abb6ea9140a8ba138dfe68aa2730/src/elements/stream_element.js#L49. That would be the best solution!

Other than that I think option 3 makes the most sense, presumably if you setTimout with a 1ms delay then then stream element would render first, then your code would run?