React Error: “SharedArrayBuffer is not defined” in Firefox

I have a React app, created with ‘create-react-app’ (I also use jsdom NPM package), and for some reason, the application throws an error on load Only in Firefox (works fine in Chrome & Edge).
Here is the error:

ReferenceError: SharedArrayBuffer is not defined
./node_modules/jsdom/node_modules/webidl-conversions/lib/index.js
C:/Or/Web/WorldCovid/WorldCovid/node_modules/jsdom/node_modules/webidl-conversions/lib/index.js:347

  344 | 
  345 | const abByteLengthGetter =
  346 |     Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
> 347 | const sabByteLengthGetter =
  348 |     Object.getOwnPropertyDescriptor(SharedArrayBuffer.prototype, "byteLength").get;
  349 | 
  350 | function isNonSharedArrayBuffer(V) {

After some Googling I found:
“To enable SharedArrayBuffer in Firefox, go to about:config and set the javascript.options.shared_memory preference to true” (https://github.com/ggerganov/kbd-audio/issues/9)
The problem is that it was already enabled to true.

Did anyone face this issue before? Thanks.

UPDATE:

Tried to convert to:

const shared = new SharedArrayBuffer(1024);

const abByteLengthGetter =
    Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
const sabByteLengthGetter =
    Object.getOwnPropertyDescriptor(shared.prototype, "byteLength").get;

Still get the same error (different line to the SharedArrayBuffer object).

Answer

You need to set two response headers for your document:

Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp

These are new security requirements for using SharedArrayBuffer.

You can check in code if cross origin isolation is enabled:

if (crossOriginIsolated) { // SharedArrayBuffer is available }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer