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

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