Scheduler's use of SharedArrayBuffer will require cross-origin isolation

[agektmr]

React version: v17.0.1

Steps To Reproduce

1. npx create-react-app myapp
2. cd myapp && npm start
3. Open http://localhost:3000 in Chrome 88 or 89, regular or Incognito mode
4. 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:

1. Suppress the message by using SAB only when cross-origin isolation is enabled. You can check it by self.crossOriginIsolated boolean flag.
2. 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

[koba04]

I've created a PR to fix this. #20831

[waynebloss]

Will this be back-ported to React 16? I have projects that can't upgrade yet because they rely on packages that aren't fully compatible with React 17 yet (e.g. Material-UI).

[mtiberi]

My workaround is to put a script in the index.html file:

<script> if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer </script>

[vicasas]

Why is this closed? 😮 just need to publish the solution?

[MichielDeMey]

Why is this closed?

Because the fix has been merged to master. #20831

[gaearon]

Will this be back-ported to React 16? I have projects that can't upgrade yet because they rely on packages that aren't fully compatible with React 17 yet (e.g. Material-UI).

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]

Starting Chrome 91, 'SharedArrayBuffer' in window will return false on 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-flags

[gaearon]

React 17.0.2 was released with removed dependency on SharedArrayBuffer so this should be resolved.

[gaearon]

We don't plan to backport this since there is no real breaking change for React here.

[vicasas]

@gaearon For later versions that Fix will not be available?

[gaearon]

You mean for earlier ones? No, but also nothing would break. You can ignore the message.

[sheep-tech]

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.