TypeError: null is not an object (evaluating 't.detail.render')

[mhenrixon]

For the Safari extension, I had to disable the dev tools because they crashed when rendering the detail of what I guess is the frame (not many places call detail.render).

Unfortunately, it is hard to debug it in this project because we are forced to use esbuild. However, it seems to work fine in the other browsers.

So, what I do is:

1. Fire request that is supposed to update a bunch of html
2. It applies one or two (sometimes) and then errors like in the below image:

. It is pretty standard erb html soup:

<!-- app/views/sell_orders/update_tire_price.turbo_stream.erb -->
<% price = (@sell_order&.work_order || @work_order).todos.sum(:price) %>

<% if @sell_order %>
  <%= turbo_stream.update :existing_tire do %>
    <%= render partial: "sell_orders/existing_tire", locals: { sell_order: @sell_order } %>
  <% end %>

  <%= turbo_stream.update :work_order_todos do %>
    <%= render partial: "sell_orders/work_order_todo", collection: @sell_order.work_order.todos, as: :todo %>
  <% end %>

  <%= turbo_stream.remove_attribute("#sell_order_work_order_price", "disabled") %>
  <%= turbo_stream.set_dataset_attribute("#sell_order_work_order_price", "value", price) %>
  <%= turbo_stream.set_value("#sell_order_work_order_price", price) %>
  <%= turbo_stream.set_attribute("#sell_order_work_order_price", "disabled", "disabled") %>

  <%= turbo_stream.update :sell_order_total_price do %>
    <%= number_to_currency(@sell_order.total_price) %>
  <% end %>

  <%= turbo_stream.update :summary_payment do %>
    <%= render partial: "sell_orders/summary_payment", locals: { sell_order: @sell_order } %>
  <% end %>
<% end %>

[leonvogt]

Hi @mhenrixon,

Thank you for opening this Issue. I didn't encounter this bug before, will try to reproduce it and see how it can be fixed. I'm curious to see if it's Safari specific or if it's happening on other browsers as well.

[mhenrixon]

To my knowledge, it does not happen in the other browsers, just Safari.

[leonvogt]

To my knowledge, it does not happen in the other browsers, just Safari.

Ok good to know thanks!

I've tried several different Turbo Stream responses but so far couldn't reproduce this issue. Would it be possible for you, to provide a minimal example that reproduces this issue? That works without application specific code. It don't need to be a full app, some snippets would be enough.

Or if that's not possible, could you maybe give some insight on the following questions:

• Does the error only happens to Turbo Stream responses?
• Does it need to be multiple Turbo Streams in a row, or some specific Turbo Stream that triggers the error?
• Does it matter which feature of this extension is enabled? Like does the detail panel needs to be open?
• The error you see (evaluating 'event.detail.render') doesn't make much sense to me. Since this extension should not ship with any code that uses 'event.detail.render'. Could you maybe show the origin of this error in the stack? In the screenshot was some reference to application-xxx.js:17255.

[mhenrixon]

Weird, I'll see if I can try it in a project that is using importmaps. esbuild is complete garbage since everything ends up in application.js with all variables garbled for terseness.

[leonvogt]

Not 100% sure, but the reason for the garbled variable and functions may be the esbuild minify option. Depending on how you've configured esbuild, you maybe can disable the minify like so

[mhenrixon]

Might just be Safari that is messed up! I can't for the life of me figure out what is going on but Safari is behaving weirdly. I switched over to Firefox today for most of the day because of random weird behaviors in Safari.

I'll keep digging but it could be on my side.

[leonvogt]

Thanks for the update.
We can leave this issue open until you have found out whether the error is in the extension or on your side.

[mhenrixon]

It is definitely a problem with the Safari plugin:

This does not happen in Firefox or Brave. I am on MacOS 15.1 if that makes a difference:

[leonvogt]

Hi @mhenrixon, thanks for the video! I could finally reproduce the error on my side 🎉

It seems connected to the "Monitor Events" feature. Especially to the monitoring of the "turbo:before-fetch-request" event. If I turn off this feature, everything works. When turned on, the same error occurs as you described.

Don't have a solution yet, but I'm on it. Will keep you updated.

[leonvogt]

@mhenrixon, I'm still not 100% sure what is going wrong here. I've put up a pull request that should fix this issue.
It's a hacky solution and it may not work in every situation. I publish a new version in the coming days and hope that it will fix the issue for you.

If you still experience issues, feel free to reopen this issue.