Change:
let runIdCounter: number = 0; let mainThreadIdCounter: number = 0; <ins> const isEnabledSharedArrayBuffer = // $FlowFixMe Flow doesn't know about SharedArrayBuffer typeof SharedArrayBuffer === 'function' && // We only use SharedArrayBuffer when cross origin isolation is enabled. typeof window !== 'undefined' && window.crossOriginIsolated === true; </ins> const profilingStateSize = 4; export const sharedProfilingBuffer = enableProfiling <del> ? // $FlowFixMe Flow doesn't know about SharedArrayBuffer typeof SharedArrayBuffer === 'function' </del> <ins> ? isEnabledSharedArrayBuffer </ins> ? new SharedArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT) <del> : // $FlowFixMe Flow doesn't know about ArrayBuffer typeof ArrayBuffer === 'function' </del> <ins> : typeof ArrayBuffer === 'function' </ins> ? new ArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT) : null // Don't crash the init path on IE9 : null;

Discussion:
React version: v17.0.1 http://localhost:3000 in Chrome 88 or 89, regular or Incognito mode DevTools: the warning is displayed Link to code example: https://react- Warning: 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 As it's confusing for React users to see this warning every time they open the page, I'd propose two things: the message by using SAB only when cross-origin isolation is enabled. You can check it by boolean flag. that the page needs to send COOP and COEP headers to profile performance using SharedArrayBuffer. You can find an actionable guide here: The problematic code is here: FWIW, with cross-origin isolation, you'll be able to use too. cc:
I've created a PR to fix this.
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).
My workaround is to put a script in the file: <scriptif (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer </script
Why is this closed? just need to publish the solution?
Because the fix has been merged to master.
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?
Starting Chrome 91, will return 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 . Here's instructions:
React 17.0.2 was released with removed dependency on so this should be resolved.
We don't plan to backport this since there is no real breaking change for React here.
For later versions that Fix will not be available?
You mean for earlier ones? No, but also nothing would break. You can ignore the message.

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.