react / react/react

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

Open
#16,606 6 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Scheduler Type: Bug
Dominant language
JavaScript
Stars
251k
Forks
51.4k
Avg merge
2d 4h
Merged PRs (30d)
53

Description

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:

https://github.com/facebook/react/blob/0f6e3cd61cf4a5a1491bb3c92780936aebc2a146/packages/scheduler/src/forks/SchedulerHostConfig.default.js#L88

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 https://github.com/facebook/react/issues/16605

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at packages/scheduler/src/forks/SchedulerHostConfig.default.js around line 88 and reproduce the issue with the Firefox WebExtension content-script PoC in index.js and manifest.json. Done means the content script can call requestAnimationFrame without the reported Window-interface TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.