Why does my Turbo Stream broadcast not update the DOM in Rails 8.0.1?

Below is one common explanation for this behavior. Your logs show that the subscription is working and that the broadcast is sending the expected Turbo Stream payload, so your server-side code looks good. The fact that nothing changes in the DOM usually indicates that the Turbo Streams client-side JavaScript isn’t active or isn’t loaded correctly in your application.

Here are some things to check:

1. Turbo JavaScript is Loaded
   Ensure you have added the turbo-rails (or Hotwire Turbo) JavaScript correctly to your application. In Rails 8 with import maps, you should have the following in your JavaScript entry point (typically in app/application.js or app/javascript/application.js):

   JSCopied
   import { Turbo } from "@hotwired/turbo-rails"

   Also verify that your application layout includes the proper JavaScript import map tag, for example:

   ERBCopied
   <%= javascript_importmap_tags %>

2. Correct Turbo-rails Gem Installation
   Confirm that the turbo-rails gem is in your Gemfile and properly installed. This gem is responsible for setting up the Turbo Streams channels and helpers.

3. No JavaScript Console Errors
   Open your browser’s developer console to see if there are any errors related to Turbo. If Turbo isn’t loaded or there’s a JavaScript error, the broadcasted stream won’t update your DOM.

4. Element Target Matching
   Verify that the target element exists on the page with the correct id. In your case, the broadcast targets "message" and your HTML has:

   ERBCopied
   <div id="message">
     <p>hello</p>
   </div>

   making sure it will be replaced with <p>bye</p> when the Turbo Stream is processed.

By ensuring that your Turbo JavaScript is properly imported and your layout includes the necessary tags, the client-side should pick up the broadcasted Turbo Stream message and update the DOM as expected.

If you’ve already verified these points and still receive no update, double-check your browser console and network activity for any hints of issues (e.g. caching problems or JavaScript errors).