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).
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