TypeError: "'requestAnimationFrame' called on an object that does not implement interface Window."

[Jack-Works]

Do you want to request a feature or report a bug? Bug

What is the current behavior?
TypeError: "'requestAnimationFrame' called on an object that does not implement interface Window."

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

react/packages/scheduler/src/forks/SchedulerHostConfig.default.js

Line 88 in 0f6e3cd

const requestAnimationFrame = window.requestAnimationFrame;

In the WebExtension content script, globalThis !== window.
So when const requestAnimationFrame = window.requestAnimationFrame, the this binding of rAF is lost.

In the after calling, rAF rebinds to the globalThis, but globalThis doesn't implements Window interface.

PoC: Install this extension in the Firefox and you will see the error reported.

try {
    const raf = window.requestAnimationFrame
    raf(() => console.log('Okay.'))
} catch (e) {
    console.warn(e)
}

{
    "name": "rAF in content script test",
    "version": "0.0.1",
    "manifest_version": 2,
    "content_scripts": [{ "js": ["/index.js"], "matches": ["<all_urls>"] }]
}

What is the expected behavior?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Firefox, in WebExtension.

Related to #16605

[joealden]

I can confirm that this is also happening for me when trying to upgrade React to 16.9.0 in a project that uses React in a browser extension content script.

[nhunzaker]

Interesting. I think this was introduced with this change:
3f2cafe#diff-3856e885394723dea203587a10ea16b3L39-L51

[nhunzaker]

cc @acdlite: do you think this could be a quick fix to avoid references to window? I wonder of self would work.

[Jack-Works]

Just make it raf = window.raf.bind(window) everything will be okay

[gtbono]

I made this and the tests failed, did you mean anything else?

FAIL packages/shared/tests/ReactDOMFrameScheduling-test.js
● ReactDOMFrameScheduling › warns when requestAnimationFrame is not polyfilled in the browser

TypeError: Cannot read property 'bind' of undefined

  86 |   const setTimeout = window.setTimeout;
  87 |   const clearTimeout = window.clearTimeout;
> 88 |   const requestAnimationFrame = window.requestAnimationFrame.bind(window);
     |                                                            ^
  89 |   const cancelAnimationFrame = window.cancelAnimationFrame;
  90 |   const requestIdleCallback = window.requestIdleCallback;
  91 | 

[Jack-Works]

Yeah... You need to bind it when it exists...
raf = window. raf ? window.raf.bind(window) : undefined