Repository navigation
Scheduler's use of SharedArrayBuffer will require cross-origin isolation #20829
Description
React version: v17.0.1
Steps To Reproduce
npx create-react-app myappcd myapp && npm start- Open http://localhost:3000 in Chrome 88 or 89, regular or Incognito mode
- Open DevTools: the warning is displayed
Link to code example: https://react-z95km1.stackblitz.io/
https://stackblitz.com/edit/react-z95km1
The current behavior
Warning: scheduler.development.js:298 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
The expected behavior
No warning will be shown.
As the warning shows, Chrome will require cross-origin isolation starting version 91 in order to use SharedArrayBuffer. To enable cross-origin isolation, the page needs to be loaded with COOP and COEP headers which I believe is out of React's control. You can learn more about this at https://developer.chrome.com/blog/enabling-shared-array-buffer/.
As it's confusing for React users to see this warning every time they open the page, I'd propose two things:
- Suppress the message by using SAB only when cross-origin isolation is enabled. You can check it by
self.crossOriginIsolatedboolean flag. - Document that the page needs to send COOP and COEP headers to profile performance using SharedArrayBuffer. You can find an actionable guide here: https://web.dev/cross-origin-isolation-guide/
The problematic code is here: https://github.com/facebook/react/blob/master/packages/scheduler/src/SchedulerProfiling.js#L21-L22
FWIW, with cross-origin isolation, you'll be able to use JS Self-Profiling API too.
cc: @acomminos @maudnals
Activity
[-]Bug: DevTools warning: SharedArrayBuffer will require cross-origin isolation[/-][+]Scheduler's use of SharedArrayBuffer will require cross-origin isolation[/+]koba04 commentedon Feb 17, 2021
I've created a PR to fix this. #20831
mtiberi commentedon Mar 18, 2021
My workaround is to put a script in the index.html file:
<script> if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer </script>vicasas commentedon Mar 19, 2021
Why is this closed? 😮 just need to publish the solution?
MichielDeMey commentedon Mar 19, 2021
Because the fix has been merged to master. #20831
gaearon commentedon Mar 20, 2021
We don’t generally backport anything except critical security fixes. My understanding is that the only problem here is a warning. Not that something would actually break. Do you have evidence to the contrary?
agektmr commentedon Mar 22, 2021
Starting Chrome 91,
'SharedArrayBuffer' in windowwill returnfalseon environments without cross-origin isolation. This shouldn't be a breaking change for React as far as I can tell.FWIW, you can emulate how it will behave in Chrome by launching it with a command line flag
--enable-features=RestrictSharedArrayBuffer. Here's instructions: https://www.chromium.org/developers/how-tos/run-chromium-with-flagsgaearon commentedon Mar 22, 2021
React 17.0.2 was released with removed dependency on
SharedArrayBufferso this should be resolved.gaearon commentedon Mar 22, 2021
We don't plan to backport this since there is no real breaking change for React here.
vicasas commentedon Mar 29, 2021
@gaearon For later versions that Fix will not be available?
gaearon commentedon Mar 30, 2021
You mean for earlier ones? No, but also nothing would break. You can ignore the message.
chore: Bump react and react-dom
worked around SharedArrayBuffer cross-origin isolation warning in app.js
sheep-tech commentedon Dec 8, 2022
use http-proxy-middleware package but works only in dev mode, so not in production. I'd suggest using a Nginx as proxy and inject the 2 http headers.