'cancelAnimationFrame' called on an object that does not implement interface Window

[brawaru]

Reproduction

Large internal code base, code uses hooks, presumably useEffect does this.

Steps to reproduce

0. Use… Firefox and run Preact inside content script (userscript, extension).
1. Try rendering a component with useEffect and other funky stuff.

Expected Behavior

Component successfully renders, or at least, all errors are catched within error boundary component.

Actual Behavior

Component does not render, but fails due to attempt to call cancelAnimationFrame withing… window scope, but somehow it ends up that 'cancelAnimationFrame' called on an object that does not implement interface Window. Nothing is catched by error boundary.

Proposed Solution

Bind {cancel,request}AnimationFrame functions to ensure they are always called on an object that DOES implement interface Window, to make our odd friend, Firefox, happy. React had/has same issue at facebook/react#16606.

I was able to mitigate this issue by having this in my rollup config:

replace({
    values: {
         // FIX DARN FIREFOX!
        "requestAnimationFrame(": "unsafeWindow.requestAnimationFrame.bind(unsafeWindow)(",
        "cancelAnimationFrame(": "unsafeWindow.cancelAnimationFrame.bind(unsafeWindow)(",
    },
}),

Interesting fact: unsafeWindow === window, but only binding and using unsafeWindow works. Why? Well, can't help you with that question. Because Firefox DevTools yet again proven to be flawed and displays proxy to window as window object itself, Firefox apparently cannot distinguish them. Wow!

[marvinhagemeister]

Does binding to window work the same way? Some googling seems to reveal that the global object is different in the extension context.

[brawaru]

I actually think I narrowed down the issue. So apparently my manager dictates that window is a proxy to actual so-called unsafeWindow (page window itself) and Firefox DevTools weren't (by some reason) able to distinguish them. By replacing bind to double window unsafeWindow it works (cancelAnimationFrame.bind(unsafeWindow)). I guess that's then only my userscript usage case and I was mistaken it would be related to binding to window and what's happening in React. I'll close the issue, anyone who will encounter same issue may open another one. Sorry for bothering!