Safari bug: null is not an object

[leonvogt]

For some unknown reason, whenever the extension intercepts and uses an event in Safari like this:

window.addEventListener("turbo:before-fetch-request", (event) => {
  console.log("event", event)
}, { passive: true })

Safari will throw the error: null is not an object (evaluating 'event.detail.url')

In this case the error comes from this function inside the Turbo repo:

async #allowRequestToBeIntercepted(fetchOptions) {
  const requestInterception = new Promise((resolve2) => this.#resolveRequestPromise = resolve2);
  const event = dispatch("turbo:before-fetch-request", {
    cancelable: true,
    detail: {
      fetchOptions,
      url: this.url,
      resume: this.#resolveRequestPromise
    },
    target: this.target
  });
  this.url = event.detail.url;
  if (event.defaultPrevented) await requestInterception;
  return event;
}

Specifically this line:

this.url = event.detail.url;

However, the following code works without any issues in Safari:

window.addEventListener("turbo:before-fetch-request", (event) => {
  // console.log("event", event)
}, { passive: true })

or even:

window.addEventListener("turbo:before-fetch-request", (event) => {
    const target = event.target
    console.log("target", target)
}, { passive: true })

---

It seems like as soon as we try to use the entire event object, the custom properties like event.detail are lost in Safari.
This behaviour only occurs in Safari and only when a browser extension intercepts the event.
When you use the same event listeners in a ordinary application code, everything works as expected.
I currently have no idea why this is happening or how we can prevent it.
The only hacky workaround that seems to work is to use a setTimeout with some delay.
Not ideal and I hope we can find a better solution in the future. But in the meantime it's better than nothing. I guess.