Getting the stream response but the DOM isn't changing

Hey, I’m trying out turbo in a demo app. I’ve got to the point where I have a list of messages and I want the create action to stream a response. This is what it looks like:

<div id="turbo-stream-messages">
  <%= turbo_frame_tag "new_message", src: new_message_path, target: "_top" %>
  <%= render @messages %>

When I save a new message, I’m getting the right response when I check in the network tab:

<turbo-stream action="append" target="turbo-stream-messages"><template><div>
  <div id=message_82a5adf9-5a64-460d-aec9-af54ea2a7b2d>
    here's a message


(The div in the template is what’s rendered by the partial.)

However, nothing changes in the DOM. I’ve double checked that the ids match. I don’t know where to start debugging this. My intuition is that the js for turbo streams is missing on the client, but I’m not sure how to test it or fix it. I’m using webpacker, but have no other js except a couple of stimulus controllers.

E: Worth mentioning that turbo frames etc. are working fine. It’s only the stream that fails.

Aha, fixed it myself. In application.js, I was requiring ujs. Removing it made streaming work instantly.

Feel a little dumb in hindsight :sweat_smile:

1 Like